Generate multiple Range Sliders dynamically with unique IDs

Question

Update: The correct answer is given below

So I have got a button "Add new subpoint", on clicking the button a new row gets added to the table with 3 range slider. My problem is that whenever I click on a button the JS code doesn't get applied to it. I'm new to JS can anyone please help me with the problem.

HTML Code

<tr style="text-align: center;">
<td name="name" id="metrics'+unique_id + '">Attendance - Team</td>
<td>
<input style="width: 50px; height: 30px; border-radius: 10%;" type="number" id="weightage'+unique_id + '" name="weight" value="10">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex2SliderVal1" value="20">
<input style="width: 85px; margin-right: 40px;" id="ex" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex2SliderVal2" value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex3SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="lx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex3SliderVal2"  value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex4SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="zx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
 <input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex4SliderVal2" value="80">
</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
 <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
 <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>

JS Code

    $("#ex").slider({});
    $("#ex").on("slide", function(slideEvt) {
        $(".ex2SliderVal1").val(slideEvt.value[0]);
        $(".ex2SliderVal2").val(slideEvt.value[1]);
    });
    $("#lx").slider({});
    $("#lx").on("slide", function(slideEvt) {
        $(".ex3SliderVal1").val(slideEvt.value[0]);
        $(".ex3SliderVal2").val(slideEvt.value[1]);
    });
    $("#zx").slider({});
    $("#zx").on("slide", function(slideEvt) {
        $(".ex4SliderVal1").val(slideEvt.value[0]);
        $(".ex4SliderVal2").val(slideEvt.value[1]);
    });

how do I write a JS code which will create a row dynamically as each ID should be unique?

Answer 1

This is the updated answer!!!

HTML CODE

<tr style="text-align: center;">
<td name="name" id="metrics'+unique_id + '">Attendance - Team</td>
<td>
<input style="width: 50px; height: 30px; border-radius: 10%;" type="number" id="weightage'+unique_id + '" name="weight" value="10">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex2SliderVal1" value="20">
<input style="width: 85px; margin-right: 40px;" id="ex" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex2SliderVal2" value="80">
</td>
<td>
 <input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex3SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="lx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex3SliderVal2"  value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex4SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="zx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex4SliderVal2" value="80">
</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>

JS CODE

$(".add-new").click(function(){
        $(this).attr("disabled", "disabled");
        var index = $("table tbody tr:last-child").index();
        var unique_id=1
        unique_id++
        var i = 1
        i++
        var row = '<tr style="text-align: center;">' +
        '<td><input type="text" class="form-control" name="metrics" id="metrics'+unique_id + '"></td>' +
        '<td><input style="width: 50px; height: 30px; border-radius: 10%;" id="weightage'+unique_id + '" type="number" name="weightage"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="ex'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="ex'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="ex'+i+'SliderVal2" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="lx'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="lx'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="lx'+i+'SliderVal2" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="zx'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="zx'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="zx'+i+'SliderVal2" value="80"></td>' +
        '<td>' + actions + '</td>' +
        '</tr>';

        $("table").append(row); 
        $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();

        $("#ex"+unique_id + "").slider({});
        $("#ex"+unique_id + "").on("slide", function(slideEvt) {
            $("#ex"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#ex"+i+"SliderVal2").val(slideEvt.value[1]);
        });

        $("#lx"+unique_id + "").slider({});
        $("#lx"+unique_id + "").on("slide", function(slideEvt) {
            $("#lx"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#lx"+i+"SliderVal2").val(slideEvt.value[1]);
        });
        $("#zx"+unique_id + "").slider({});
        $("#zx"+unique_id + "").on("slide", function(slideEvt) {
            $("#zx"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#zx"+i+"SliderVal2").val(slideEvt.value[1]);
        });

    });

Answer 2

You could create them with document.createElement('div') then creating a var with html and adding (with appendChild() ) it to your created div This could help:

http://jsfiddle.net/pmiranda/oz38ucbt/5/