autocomplete not working for dynamic created input rows

i have form with dynamic created rows. I added autocomplete with my form which worked fine for single row. But when i created dynamic rows, it stopped working. i attached main file, js file , backend file and jquerry online links of website which handle autocomplete for single row

     ```<form method="POST">
                          <table class="table table-bordered">
         <thead class="table-success" style="background-color: #3fbbc0;">
                                        <tr>
                   <th width="15%"><center>Service</th>
                        <th width="10%"><center>Mach No</th>
                    <th width="10%"><center>Consultant</th> 
                       <th width="5%"><center>Qty</th>                
           <button type="button" class="btn btn-sm btn-success"      onclick="BtnAdd()">+</button>                          
                              </th>

                               </tr>
                                </thead>
                    <tbody id="TBody">
                      <tr id="TRow" class="d-none">
                     <td><input type="text"  class="scode form-control text-end" name="scode[]" id =      "tutorial_name"   onchange="GetDetail(this.closest('tr'))"></td>
                   <td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc"                    onfocus="Calc(this);"></td>
                        </tr>
//jquerry webfile for autocomplete
                    </form>    
                <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
                <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                  <script type="text/javascript" src="frontend-script.js"></script>```
javascript code to add dynamic rows
```<script type="text/javascript">
           function BtnAdd()
                    {
                    /*Add Button*/
                    var v = $("#TRow").clone().appendTo("#TBody") ;
                     $(v).find("input").val('');
                      $(v).removeClass("d-none");
                   $(v).find("th").first().html($('#TBody tr').length - 1);
                }

                   function BtnDel(v)
                  {
                   /*Delete Button*/
                     $(v).parent().parent().remove(); 
                              GetTotal();

                           $("#TBody").find("tr").each(
                              function(index)
                          {
                           $(this).find("th").first().html(index);
                           }
                        );
                      }```

this is my backfile below which take values from the database table . 
           ```<?php

              include('database.php'); 

              $searchTerm = $_GET['term'];
              $sql = "SELECT * FROM machine1 WHERE                            user_id LIKE '%".$searchTerm."%'"; 
            $result = $conn->query($sql); 
             if ($result->num_rows > 0) {
               $tutorialData = array(); 
               while($row = $result->fetch_assoc()) {    
                  $data['id']    = $row['id']; 
                  $data['value'] = $row['user_id'];
                   array_push($tutorialData, $data);
                 } 
                }
               echo json_encode($tutorialData);
                      ?>```    

this is mine js file

                  ``` $( function() {
                 $( "#tutorial_name" ).autocomplete({
                     source: 'backend-script.php'  
                      });
                       });```

Via Active questions tagged javascript - Stack Overflow https://ift.tt/hZ6BbJY