CODEWITHSUNDEEP
javascript
jerin
jerin

Reputation: 45

after using clone function in a row how can create different id for each row

after using clone function in a row, how can create different id for each row

i using add more button add new rows i like to create different id for each row

function cloneRow() {

    var row = document.getElementById("clone");
    var table = document.getElementById("data");
    var selectIndex = 1;
    var clone = row.cloneNode(true);

    table.appendChild(clone);
    clone.setAttribute("style", "");

    var newSelectBox = document.createElement("select");
    newSelectBox.setAttribute("id", "select-" + selectIndex++);

    alert(newSelectBox.getAttribute("id"));

}
        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7"></div>
                <div class="col-sm-2">
                    <button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
                </div>
            </div>
        </div><br>

        <div class="row" id ="close">
            <div class="col-sm-4"></div>
            <div class='col-sm-4'>
                <Form id="NAME_VALUE" method="POST" >
                    <table  class="table-striped" >
                        <tbody id="data">
                            <tr id ="clone" style="display:none;">
                                <td>
                                    Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> 
                                </td>
                                <td>
                                    Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> 
                                </td>
                                <td>
                                    <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
                                            return false;">
                                        <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
                                </td>
                            </tr>
                             <tr>
                                <td>
                                    Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> 
                                </td>
                                <td>
                                    Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> 
                                </td>
                                <td>
                                    <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
                                            return false;">
                                        <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
                                </td>
                            </tr>
                        </tbody>
                    </table><br>
                    <button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login();
                        return false;"> save.</button>
                </Form>
            </div>
        </div>

its coming only select-0 to every one i like to select-0,select-1, select-2 depends on the add more button clicked

Upvotes: 3

Views: 49

Answers (1)

AshBringer
AshBringer

Reputation: 2673

You can set a variable like this outside your function : 

var  i = 0;

and update it inside your function : 

i = i + selectIndex

https://jsfiddle.net/gg1eyqgu/

Upvotes: 2

Related Questions