var i =1;

             $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip();
                var actions = $("table td:last-child").html();

                $(".add-heading").click(function(){
                    var index = $("table tbody tr:last-child").index();
                    var row = '<tr>' +
                    '<td style="text-align: center; font-weight: bold; color: blue; font-size: 20px;" colspan="2">Heading - <input class="resizedTextbox" height: 30px; border-radius: 10%;" type="text" class="form-control" name="metrics" id="metrics"></td>' +
                    '<td style="text-align: right; font-weight: bold;" colspan="2">Total Weightage - <input style="width: 50px;  margin-left: 20px; height: 30px; border-radius: 10%;" id="wei'+(unique_id) + '" onclick="setLastSelected(this)" type="number" name="weightage"></td>' +
                    '<td style="text-align: right; font-weight: bold;" colspan="2"> Divide Weightage -   <input id="check-border" type="checkbox">' +
                    '<td style="text-align: center;">' + actions + '</td>' +
                    '</tr>';
                    $("table").append(row);
                    $('[data-toggle="tooltip"]').tooltip();
                });




                $(".add-point").click(function(){
                      var index = $("table tbody tr:last-child").index();

                    var row = '<tr style="text-align: center;">' +
                    '<td><input type="text" class="resizedTextbox2" class="form-control metrics" name="metrics" id="metrics'+(unique_id) + '"></td>' +
                    '<td><input style="width: 50px; height: 30px; border-radius: 10%;" class="weight"  id="weightage'+(unique_id) + '" type="number" name="weightage"></td>' +
                    '<td><input style="width: 18px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="ex0n'+i+'" value="20" >%<input style="width: 120px; margin-left: 15px;" name="n'+i+'" 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: 23px; font-size: 13px; border: none; margin-left: 9px;" type="text"  id="ex1n'+(i)+'" value="80">%</td>' +
                    '<td><input style="width: 18px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="lx0n'+(i)+'" value="20">%<input style="width: 120px;" name="n'+i+'" 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: 23px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="lx1n'+(i)+'" value="80">%</td>' +
                    '<td><input style="width: 18px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="zx0n'+(i)+'" value="20  ">%<input style="width: 120px;" name="n'+i+'" 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: 23px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="zx1n'+(i)+'" value="80">%</td>' +
                    '<td><input style="width: 18px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="yx0n'+(i)+'" value="20  ">%<input style="width: 120px;" name="n'+i+'" id="yx'+(unique_id) + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 23px; font-size: 13px; margin-left: 10px; margin-bottom: 5px; border: none;" type="text" id="yx1n'+(i)+'" value="80">%</td>' +
                    '<td>' + actions + '</td>' +
                    '</tr>';
                    $("table").append(row);

                    $('[data-toggle="tooltip"]').tooltip();

                    $("#ex"+unique_id).slider({});
                    $("#ex"+unique_id).on("slide", function(slideEvt) {
                        var nid=$(this).attr('name');
                        $("#ex0"+nid).val(slideEvt.value[0]);
                        $("#ex1"+nid).val(slideEvt.value[1]);
                    });

                    $("#lx"+unique_id).slider({});
                    $("#lx"+unique_id).on("slide", function(slideEvt) {
                        var nid=$(this).attr('name');
                        $("#lx0"+nid).val(slideEvt.value[0]);
                        $("#lx1"+nid).val(slideEvt.value[1]);
                    });

                    $("#zx"+unique_id).slider({});
                    $("#zx"+unique_id).on("slide", function(slideEvt) {
                        var nid=$(this).attr('name');
                        $("#zx0"+nid).val(slideEvt.value[0]);
                        $("#zx1"+nid).val(slideEvt.value[1]);
                    });

                    $("#yx"+unique_id).slider({});
                    $("#yx"+unique_id).on("slide", function(slideEvt) {
                        var nid=$(this).attr('name');
                        $("#yx0"+nid).val(slideEvt.value[0]);
                        $("#yx1"+nid).val(slideEvt.value[1]);
                    });
                    unique_id++
                    i++
                });

<div class="card-body">
                                <div class="button-bar">
                                <a class="btnn btnn--pill add-point">Add Sub-Point</a>
                                <a class="btnn btnn--pill add-heading">Add Heading</a>
                                </div>

                                <table id="mytable" class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th rowspan="2">Metrics</th>
                                        <th rowspan="2">Weightage</th>
                                        <th colspan="4" scope="colgroup">Target</th>
                                        <th rowspan="2">Actions</th>
                                    </tr>
                                    <tr>
                                        <th>L1</th>
                                        <th>L2</th>
                                        <th>L3</th>
                                        <th>L4</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr style="display: none;">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                           <td>
                                            <a class="add" title="Add" ><i class="material-icons">&#xE03B;</i></a>
                                            <a class="delete" title="Delete"><i class="material-icons">&#xE872;</i></a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>