title: How to add HTML form fields based on JSON response data
body: <p>I have a HTML form for products which contains initially a fields group (for the product components) of 2 rows and can add rows using a button with an onClick event to a js function addRow(). the code is:</p>
  
  <pre><code>&lt;?php
                  $arrayNumber = 0;
                  for($x = 1; $x &lt; 3; $x++) { ?&gt;
                      &lt;tr id="editRow&lt;?php echo $x; ?&gt;" class="&lt;?php echo $arrayNumber; ?&gt;"&gt;                          
                          &lt;td style="padding-left:20px;padding-right: 20px;"&gt;
                              &lt;div class="form-group"&gt;
                              &lt;select class="form-control" name="editRawName[]" id="editRawName&lt;?php echo $x; ?&gt;" onchange="getRawData(&lt;?php echo $x; ?&gt;)"&gt;
                                  &lt;option value=""&gt;~~SELECT~~&lt;/option&gt;
                                  &lt;?php
                                      $rawSql = "SELECT * FROM raw_material WHERE status = 1";
                                      $rawData = $connect-&gt;query($rawSql);
  
                                      while($row = $rawData-&gt;fetch_array()) {                                         
                                          echo "&lt;option value='".$row['raw_id']."' id='changeRaw".$row['raw_id']."'&gt;".$row['raw_name']."&lt;/option&gt;";
                                          } // /while 
  
                                  ?&gt;
                              &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td style="padding-left:20px;"&gt;
                              &lt;div class="form-group"&gt;
                              &lt;input type="number" name="editQuantity[]" id="editQuantity&lt;?php echo $x; ?&gt;"  autocomplete="off" class="form-control" min="1"/&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
  
                              &lt;button class="btn btn-default removeRawRowBtn" type="button" id="removeRawRowBtn" onclick="removeRawRow(&lt;?php echo $x; ?&gt;)"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;?php
                  $arrayNumber++;
                  } // /for?&gt;
  </code></pre>
  
  <p>Now, to edit a product I use a js function editProduct() to fetch the selected product data and return it as a JSON response to fill the product form fields. The editProduct function code part to grab and fill product fields is:</p>
  
  <pre><code>function editProduct(productId = null) {
  
  if(productId) {
      $("#productId").remove();
      $(".text-danger").remove();
      $(".form-group").removeClass('has-error').removeClass('has-success');
      $('.div-loading').removeClass('div-hide');
      $('.div-result').addClass('div-hide');
  
      $.ajax({
          url: 'action.php',
          type: 'post',
          data: {productId: productId},
          dataType: 'json',
          success:function(response) {
              $('.div-loading').addClass('div-hide');
              $('.div-result').removeClass('div-hide');
  
              $(".editProductFooter").append('&lt;input type="hidden" name="productId" id="productId" value="'+response.product_id+'" /&gt;');
  
              // product name
              $("#editProductName").val(response.product_name);
              // category name
              $("#editCategoryName").val(response.categories_id);
              // quantity
              $("#editProductQuantity").val(response.quantity);
              // product unit
              $("#editProductUnit").val(response.product_unit);
              // sales margin
              $("#editSalesMargin").val(response.sales_margin);
              // status
              $("#editProductStatus").val(response.status);
              // Get the product components count
              var totalComponents = response.total_components;
              // Loop for every component
              // Set the fields id that will contains the data
              // Fill the fields with data
              for (var x = 0; x&lt;totalComponents; x++){
  
                  var idrawn = "#editRawName"+x.toString();
                  var idrawq = "#editQuantity"+x.toString();
                  var resri = "raw_id_"+x.toString();
                  var resqu = "rp_quantity_"+x.toString();
              $(idrawn).val(response[resri]);
              $(idrawq).val(response[resqu]);
              }
  </code></pre>
  
  <p>The problem is: In case of a product with a total components of more than 2, I need to add rows to be filled with the components data.
  First, I tried to launch the addRow() function before the last for loop in the editProduct function like this (didn't work):</p>
  
  <pre><code>if (totalComponents &gt; 2) {
                  var adro = totalComponents - 2;
                  for (var y=0; y&lt;adro; y++)
                  { addRow(); }
              }
  </code></pre>
  
  <p>Then, I tried to simulate the click of the Add Component button that launch the addRow function using the solution posted here: <a href="https://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript">How to simulate a click with JavaScript?</a>  and change the above code like this:</p>
  
  <pre><code>if (totalComponents &gt; 2) {
                  var adro = totalComponents - 2;
                  for (var y=0; y&lt;adro; y++)
                  { eventFire(document.getElementById('addRowBtn'), 'click'); }
              }
  </code></pre>
  
  <p>but still no luck.
  The code of addRow function is:</p>
  
  <pre><code>function addRow() {
  $("#addRowBtn").button("loading");
  var tableLength = $("#rawTable tbody tr").length;
  var tableRow;
  var arrayNumber;
  var count;
  
  if(tableLength &gt; 0) {
      tableRow = $("#rawTable tbody tr:last").attr('id');
      arrayNumber = $("#rawTable tbody tr:last").attr('class');
      count = tableRow.substring(3);
      count = Number(count) + 1;
      arrayNumber = Number(arrayNumber) + 1;
  } else {
      // no table row
      count = 1;
      arrayNumber = 0;
  }
  
  $.ajax({
      url: 'action1.php',
      type: 'post',
      dataType: 'json',
      success:function(response) {
          $("#addRowBtn").button("reset");
          var tr = '&lt;tr id="row'+count+'" class="'+arrayNumber+'"&gt;'+
              '&lt;td style="padding-left:20px;padding-right: 20px;"&gt;'+
                  '&lt;div class="form-group"&gt;'+
  
                  '&lt;select class="form-control" name="rawName[]" id="rawName'+count+'" onchange="getRawData('+count+')" &gt;'+
                      '&lt;option value=""&gt;~~SELECT~~&lt;/option&gt;';
                      $.each(response, function(index, value) {
                          tr += '&lt;option value="'+value[0]+'"&gt;'+value[1]+'&lt;/option&gt;';
                      });
                  tr += '&lt;/select&gt;'+
                  '&lt;/div&gt;'+
              '&lt;/td&gt;'+
              '&lt;td style="padding-left:20px;"&gt;'+
                  '&lt;div class="form-group"&gt;'+
                  '&lt;input type="number" name="quantity[]" id="quantity'+count+'" autocomplete="off" class="form-control" min="1" /&gt;'+
                  '&lt;/div&gt;'+
              '&lt;/td&gt;'+
              '&lt;td&gt;'+
                  '&lt;button class="btn btn-default removeRawRowBtn" type="button" onclick="removeRawRow('+count+')"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;&lt;/button&gt;'+
              '&lt;/td&gt;'+
          '&lt;/tr&gt;';
          if(tableLength &gt; 0) {
              $("#rawTable tbody tr:last").after(tr);
              $("#totalComponents").remove();
              var comp = '&lt;input type="hidden" name="totalComponents" id="totalComponents" value="'+count+'" /&gt;';
          } else {
              $("#rawTable tbody").append(tr);
              $("#totalComponents").remove();
              var comp = '&lt;input type="hidden" name="totalComponents" id="totalComponents" value="'+tableLength+'" /&gt;';
          }
          $("#rawTable").after(comp);
      }
  });}
  </code></pre>
  
  <p>I was wandering if there is a way to get the result that I need.</p>