Input picker plugin jquery issue

See more:

Javascript

jQuery

I am using Input Picker plugin and I am stuck at some points, here is my HTML code:

<table class="table table-bordered table-hover table-striped table-sm" id="myTable">            <thead><th></th><th>#</th><th>test1</th><th>test2</th><th>test3</th><th>test4</th><th>test5</th></thead>            <tbody>
            <tr>
      <td>
          <a href="#" class="btn btn-sm btn-danger delete-row">delete</a>
      </td>
                <td>
        1
                </td>
      <td>
        <div class="form-group">

          <input class="form-control form-control-sm" id="items" name="items">

        </div>
      </td>
                <td width="150">
                    <div class="form-group">
          <select class="form-select form-select-sm" id="uom" name="uom">
          </select>
                    </div>

</td>
                    </tr>
                </tbody>
            </table>
<a href="#" class="btn btn-sm btn-primary add-row">add</a>

and here is my JavaScript/JQuery code:

<script>
   var cloned = $('#myTable tr:last').clone();
   $(".add-row").click(function() {
     $("td:eq(1)", cloned).html($("tbody tr").length + 1);
       cloned.clone().appendTo('#myTable');
       createInputPicker();
   });

   function renumberTable(table){
     var count = 1;
     $("tbody tr", table).each(function(i, row){
       $("td:eq(1)", row).html(count++);
     });
   }

   $('#myTable').on('click', ".delete-row", function() {
       $(this).closest('tr').remove();
       renumberTable($("#myTable"));
   });

   $(document).ready(function () {
     createInputPicker();
     });


 function createInputPicker(){
        $('input#items').inputpicker({
         data:[
             {value:"2",text:"test1", description: "hello"},
             {value:"3",text:"test2", description: "simple"},
             {value:"5",text:"test3", description: "This is the description of the text 2."}
         ],
         fields:['value','text','description'],
         fieldText : 'text',
         headShow: true,
         filterOpen: true,
         autoOpen: true
      });

 }
 </script>

The job of this code

$("td:eq(1)", cloned).html($("tbody tr").length + 1);<pre>

is to print/display the number of the rows in the table and it is working fine if I am not choosing an option from input picker, but when I choose an option from the input picker the 2nd row number count will be 5 not 2. How to fix this issue?

What I have tried:

I think this code

$("td:eq(1)", cloned).html($("tbody tr").length + 1);

is conflicting with the plugin... I am not sure...