title: using jquery ajax response to make an option selected not working
body: <p>I have a code wherein my <code>Jquery</code> would fetch the data within the page inside a <code>select</code> inside a <code>table</code>. I am now familiar with how to use <code>AJAX</code> responses and <code>Jquery</code>. But this time, it seems like something is wrong within the <code>Jquery</code> itself.</p>
  
  <p>Here's my <code>AJAX</code> Response.</p>
  
  <pre><code>$.ajax({
      url: "../api/ajax/getInventory.php",
      type: "post",
      dataType: "json",
      success: function(response){
          // console.log(response["data"]);
          // console.log(Object.keys(response["data"][0]).length);
          for (var i = 0; i &lt; response["data"].length; i++) {
              $("select#ingredient_1").append('&lt;option value="'+response['data'][i][0]+'"&gt;'+response['data'][i][1]+'&lt;/option&gt;');
          }
      }
  });
  
  var id = "&lt;?php echo $id ?&gt;";
  $.ajax({
      url: "../api/ajax/getProductIngredient.php",
      type: "post",
      dataType: "json",
      data: {
          id: id
      },
      success: function(response){
          // console.log(response);
          $('#ingredient_1 option[value="'+response[0].ingredient_id+'"]').attr("selected", true);
          $("#amount_unit_1").text(response[0].amount_unit);
          $('#amount_1').val(response[0].amount);
          for (var i = 1; i &lt; Object.keys(response).length; i++) {
              // console.log(response[i]);
              var table = $("#ingredients_info_table");
              var count_table_tbody_tr = $("#ingredients_info_table tbody tr").length;
              var row_id = count_table_tbody_tr + (Math.floor(Math.random()*1000));
  
              var html = '&lt;tr id="row_'+row_id+'"&gt;&lt;td&gt;&lt;select class="form-control" data-row-id="row_'+row_id+'" id="ingredient_'+row_id+'" name="ingredient[]" onchange="getIngredientAmount(\''+row_id+'\')" style="width:100%;" required&gt;&lt;option value=""selected disabled hidden&gt;&lt;/option&gt;'
              html += '&lt;/select&gt;'+'&lt;/td&gt;&lt;td&gt;&lt;label for="amount"&gt;&lt;i id="amount_unit_'+row_id+'" &gt;Amount Unit&lt;/i&gt; x&lt;/label&gt;&lt;input type="number" name="amount[]" id="amount_'+row_id+'" class="form-control" required style="display: inline-block;"&gt;&lt;/td&gt;'+
              '&lt;td&gt;&lt;button type="button" class="btn btn-primary" onclick="removeRow(\''+row_id+'\')"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;'+
              '&lt;/tr&gt;';
  
              $.ajax({
                  url: "../api/ajax/getInventory.php",
                  type: "post",
                  dataType: "json",
                  success: function(response2){
                      // console.log(response2["data"]);
                      // console.log(Object.keys(response2["data"][0]).length);
                      for (var i = 0; i &lt; response2["data"].length; i++) {
                          $("select#ingredient_"+row_id).append('&lt;option value="'+response2['data'][i][0]+'"&gt;'+response2['data'][i][1]+'&lt;/option&gt;');
                      }
                  }
              });
              if(count_table_tbody_tr &gt;= 1) {
                  $("#ingredients_info_table tbody tr:last").after(html);
                  // console.log(1);
              }
              else {
                  $("#ingredients_info_table tbody").html(html);
                  // console.log(2);
              }
  
              console.log($('#ingredient_'+row_id).children("option:selected"). val());
              // console.log($('#ingredient_'+row_id));
              console.log(row_id);
              console.log(response[i].ingredient_id);
              $('#ingredient_'+row_id+' option[value="'+response[i].ingredient_id+'"]').attr("selected", true);
              console.log($('#ingredient_'+row_id).children("option:selected"). val());
              $('#amount_unit_'+row_id).text(response[i].amount_unit);
              $('#amount_'+row_id).val(response[i].amount);
  
          }
      },
      error: function(jqXHR, textStatus, errorThrown){
          console.log(errorThrown);
      }
  });
  </code></pre>
  
  <p>As mentioned from the comments of the code, the part of the code wherein my <code>Jquery</code> is used to make an option generated from an <code>AJAX</code> response doesn't work. My guess is that the generated <code>rows of data</code> from the <code>Jquery</code> is not reading the <code>$('#ingredient_'+row_id+' option[value="'+response[i].ingredient_id+'"]').attr("selected", true);</code></p>
  
  <p>Send help.</p>
  
  <p>EDIT: Here's the <code>div</code> with table</p>
  
  <pre><code>&lt;div class="form-group row"&gt;
      &lt;div class="col-sm-2 mb-3 mb-sm-0"&gt;&lt;/div&gt;
      &lt;div class="col-sm-8 mb-3 mb-sm-0"&gt;
          &lt;label for="item_name"&gt;Product Description&lt;/label&gt;
          &lt;input type="text" name="counter" id="counter" style="margin-left:90%;" size="3" maxlength="3" value="160" readonly&gt;
          &lt;textarea name="mname" class="form-control" rows="4" cols="80" style="resize:none;" id="text" placeholder="Type" onKeyDown = "countText(document.getElementById('text'),document.getElementById('counter'),160)"
          onKeyUp = "countText(document.getElementById('text'),document.getElementById('counter'),160)" maxlength="160"&gt;&lt;?php echo $mname ?&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2 mb-3 mb-sm-0"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
      &lt;div class="col-sm-2"&gt;&lt;/div&gt;
      &lt;div class="col-sm-8 mb-3 mb-sm-0"&gt;
          &lt;table class="table table-bordered" id="ingredients_info_table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th style="width:60%"&gt;Ingredients&lt;/th&gt;
                      &lt;th style="width:30%"&gt;Amount&lt;/th&gt;
                      &lt;th style="width:10%"&gt;
                          &lt;button type="button" id="add_row" class="btn btn-primary"&gt;
                              &lt;i class="fa fa-plus"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr id="row_1"&gt;
                      &lt;td&gt;
                          &lt;select class="form-control" data-row-id="row_1" id="ingredient_1" name="ingredient[]" onchange="getIngredientAmount(1)" style="width:100%;" required&gt;
                              &lt;option value="" selected disabled hidden&gt;&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;label for="amount"&gt;&lt;i id="amount_unit_1" &gt;Amount Unit&lt;/i&gt; x&lt;/label&gt;
                          &lt;input type="number" name="amount[]" id="amount_1" class="form-control" required style="display: inline-block;"  &gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the logs</p>
  
  <pre><code>product-update.php?id=67:436 
  product-update.php?id=67:438 285
  product-update.php?id=67:439 1573065076
  product-update.php?id=67:441 
  </code></pre>
  
  <p>EDIT: here's the updated <code>options</code> after the <code>AJAX</code> responses</p>
  
  <pre><code>&lt;select class="form-control" data-row-id="row_639" id="ingredient_639" name="ingredient[]" onchange="getIngredientAmount('639')" style="width:100%;" required=""&gt;
      &lt;option value="" selected="" disabled="" hidden=""&gt;&lt;/option&gt;&lt;option value="12"&gt;sugar
      &lt;/option&gt;
      &lt;option value="1573065076"&gt;Iceice beybe
      &lt;/option&gt;
      &lt;option value="1573266969"&gt;try
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>the data that needs to be compared is <code>console.log(response[i].ingredient_id);</code> which is equal to <code>1573065076</code> which appears on the 2nd <code>option</code> of the updated <code>select options</code>.</p>