increment serial no of row in jquery

Question

I am writing a code to dynamically generate rows. I am having a trouble that the row no is wrongly generated. The problem comes that the row which is firstly visible's serial no is changed and others just move down with correct format.Please anybody tell what should I do to get Serial no correctly Following is my code. html code

    var counter = 1;
    $(function () {

    $("#button1").click(function () {
        counter++;
        $('#dynamic').append($("#main-row").clone().attr("id", counter + 1));
        $("#serial").text(counter);

    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
              <div class="row " id="main-row">
               <div class="col-sm-1 serial  " id="serial">1</div>
                   <div class="col-sm-2  ">
                    <select class="container-fluid" name="select item"        id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000" id="30000">Computer</option>
                        <option value="4000" id="4000">Mobile</option>
                        <option value="5000" id="5000">LCD</option>
                        <option value="1500" id="1500">Keyboard</option>
                        <option value="500" id="500">Mouse</option>
                    
                     </select>
            </div>
            <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
            <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice"  id="price1" value="" min="1" readonly/></div>  
            <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total"  readonly/></div>
            <button class="btn-primary col-sm-1 del ">Delete</button>
        </div>

    </div>
    <div class="btn-group-vertical offset-10">
        <button class="btn btn-primary" id="button1">Add Row</button>
        <button class="btn-warning" id="btnSubmit">Submit Order</button>
    </div>

Answer 1

You can use CSS counters for this.

Check the following code snippet:

var counter = 1;
$(function() {

  $("#button1").click(function() {
    counter++;
    $('#dynamic').append($("#main-row").clone().attr("id", counter + 1));


  });
});

.container {
  counter-reset: row;
  /* Set the row counter to 0 */
}

.container .row::before {
  counter-increment: row;
  /* Increment the row counter*/
  content: counter(row) ": ";
  /* Display the row */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
  <div class="row " id="main-row">

    <div class="col-sm-2  ">
      <select class="container-fluid" name="select item" id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000" id="30000">Computer</option>
                        <option value="4000" id="4000">Mobile</option>
                        <option value="5000" id="5000">LCD</option>
                        <option value="1500" id="1500">Keyboard</option>
                        <option value="500" id="500">Mouse</option>
                    
                     </select>
    </div>
    <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
    <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice" id="price1" value="" min="1" readonly/></div>
    <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total" readonly/></div>
    <button class="btn-primary col-sm-1 del ">Delete</button>
  </div>

</div>
<div class="btn-group-vertical offset-10">
  <button class="btn btn-primary" id="button1">Add Row</button>
  <button class="btn-warning" id="btnSubmit">Submit Order</button>
</div>

Answer 2

You have to keep the id as a unique attribute value. When you clone a content, all ids inside that content would be duplicated. So, you wouldn't have unique ids.

I changed your code and used classes instead of ids

var counter = 1;
    $(function () {

    $("#button1").click(function () {
        counter++;
        $('#dynamic').append($(".main-row:first").clone().attr("id", "row_" + counter));
        $("#row_" + counter).find(".serial").text(counter);

    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
              <div class="row main-row">
               <div class="col-sm-1 serial">1</div>
                   <div class="col-sm-2  ">
                    <select class="container-fluid" name="select item"        id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000">Computer</option>
                        <option value="4000">Mobile</option>
                        <option value="5000">LCD</option>
                        <option value="1500">Keyboard</option>
                        <option value="500">Mouse</option>
                    
                     </select>
            </div>
            <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
            <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice"  id="price1" value="" min="1" readonly/></div>  
            <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total"  readonly/></div>
            <button class="btn-primary col-sm-1 del ">Delete</button>
        </div>

    </div>
    <div class="btn-group-vertical offset-10">
        <button class="btn btn-primary" id="button1">Add Row</button>
        <button class="btn-warning" id="btnSubmit">Submit Order</button>
    </div>

Answer 3

I think you should increment counter on the basis of row appended to container.After using this logic your code will as like below.

$("#button1").click(function () {
        var counter = $(".container>.row").length;
        var next_id = counter + 1;
        $('#dynamic').append($("#main-row").clone().attr("id", next_id));
        $("#"+next_id).find(".serial").text(next_id);
});