Pasted

<!doctype html>
<html>
<head>
<title>How to autocomplete data on multiple fields with jQuery and AJAX</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "myStyle.css"/>
<link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(document).on('keydown', '.username', function() {                
    var id = this.id;
    var splitid = id.split('_');
    var index = splitid[1];
    $( '#'+id ).autocomplete({
      source: function( request, response ) {
        $.ajax({
            url: "getDetails.php",
            type: 'post',
            dataType: "json",
            data: {
                search: request.term,request:1
            },
            success: function( data ) {
                response( data );
            }
        });
      },
      select: function (event, ui) {
        $(this).val(ui.item.label); // display the selected text
        var userid = ui.item.value; // selected id to input
 
        // AJAX
        $.ajax({
          url: 'getDetails.php',
          type: 'post',
          data: {userid:userid,request:2},
          dataType: 'json',
          success:function(response){      
            var len = response.length;
            if(len > 0){
              var id = response[0]['ID'];
              var name = response[0]['product_number'];
              var categoriesname = response[0]['categories_name'];
              var totalstock = response[0]['total_stock'];
              document.getElementById('name_'+index).value = name;
              document.getElementById('categories_name_'+index).value = categoriesname;
              document.getElementById('total_stock_'+index).value = totalstock;
            }
          }
        });     
        return false;
      }
    });
  });
    
  // Add more
  /*
  $('#addmore').click(function(){
    // Get last id
    var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
    var split_id = lastname_id.split('_');
 
    // New index
    var index = Number(split_id[1]) + 1;
 
    // Create row with input elements
    var html = "<tr class='tr_input'><td><input type='text' class='username' id='username_"+index+"' placeholder='Enter username'></td><td><input type='text' class='name' id='name_"+index+"' ></td></tr>";
    // Append data
    $('tbody').append(html);
  });*/
});
</script>
<style>
  form label {
   display: inline-block;
   width: 100px;
   font-weight: bold;
  }
  
  body {font-family: calibri;color:#4e7480;}
  .tutorial-table {
      border: #e1e0e0 1px solid;
  }
  .tutorial-table th {
      text-align: center;
      background: #f0F0F0;
      padding: 10px;
  }
  .tutorial-table td {
      text-align: right;
      border-bottom: #e1e0e0 1px solid;
      padding: 10px;
  }
  
  @media screen and (max-width: 900px) and (min-width: 550px) {
    .priority-5{
        display:none;
    }
  }
  
  @media screen and (max-width: 550px) {
    .priority-5{
        display:none;
    }
    .priority-4{
        display:none;
    }
  }
  
  @media screen and (max-width: 300px) {
    .priority-5{
        display:none;
    }
    .priority-4{
        display:none;
    }
    .priority-3{
        display:none;
    }
    .priority-2{
        display:none;
    }
  }
 </style>
</head>
<body>
 <div align="right">
   <!-- <input type='button' value='Add more' id='addmore'> -->  
  <table class='tutorial-table' align='center';>
  <form class="form-style-9" action="" method="post">
   <tr>
    <th>כמות במלאי</th>
    <th>קטגוריה</th>
    <th>מק"ט</th>
    <th>שם המוצר</th>
   </tr>
  <tr>
   <td><input type='number' class="totalstock" name="total_stock" id='total_stock_1' readonly></td>
   <td><input type='text' class="categoriesname" name="categories_name" id='categories_name_1' ></td>
   <td><input type='text' class="name" name="product_name" id='name_1' ></td>
   <td><input type='text' class="username" name="product_number" id='username_1' placeholder='הכנס שם מוצר'></td>
  </tr>
  <tr>
  <td></td>
  <td><input type="reset" class="align-right" name="submit2" value="נקה תופס"></td>
  <td><input type="submit" class="align-right" name="update" value="עדכן"></td>
  <td><input type="submit" class="align-left" name="submit1" value="מוצר חדש"></td>
  </tr>
 </form>
 </table>
</div>
</body>
</html>