title: Retrieve data from MySQL into dynamically input using PHP & Ajax
body: <p>I'm building some application which is retrieving data from MySql database into a dynamically inputs using PHP &amp; Ajax when I'm retrieving data for this input it always shown in the next one but it suppose shown in the div that I mentioned in Ajax code.</p>
  <p>This picture will explain my problem clearly sorry for my language English is not my first language.</p>
  <p><a href="https://i.stack.imgur.com/6lSDJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6lSDJ.jpg" alt="enter image description here" /></a></p>
  <p>My html code:</p>
  <pre><code>                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label class=&quot;control-label col-lg-4&quot;&gt;&lt;/label&gt;
                        &lt;div class=&quot;col-lg-4&quot;&gt;
                          &lt;div class=&quot;box&quot;&gt;
                            &lt;header&gt;
                              &lt;h5&gt;تفاصيل الطلب&lt;/h5&gt;
                              &lt;/header&gt;
                              &lt;div class=&quot;body&quot;&gt;
                                &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label class=&quot;control-label col-lg-2&quot;&gt;الصنف&lt;/label&gt;
                                    &lt;div class=&quot;col-lg-10&quot;&gt;
                                        &lt;select id=&quot;itemname&quot; name=&quot;itemname[]&quot; class=&quot;form-control&quot;&gt;
                                          &lt;option disabled selected&gt;اختر الصنف&lt;/option&gt;
                                          &lt;?php echo getValues($pdo); ?&gt;
                                        &lt;/select&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label class=&quot;control-label col-lg-2&quot;&gt;السعر&lt;/label&gt;
                                  &lt;div class=&quot;col-lg-10&quot;&gt;
                                    &lt;input type=&quot;text&quot; id=&quot;price&quot; name=&quot;price[]&quot; placeholder=&quot;-&quot; readonly class=&quot;form-control&quot;&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;form-group&quot;&gt;
                                  &lt;label class=&quot;control-label col-lg-2&quot;&gt;الكمية&lt;/label&gt;
                                  &lt;div class=&quot;col-lg-10&quot;&gt;
                                    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;quantity[]&quot; id=&quot;quantity&quot; value=&quot;0&quot; min=&quot;1&quot;&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  <p>PHP file:</p>
  <pre><code>&lt;?php    
      require 'DBConnection.php';
      $code='';
      if(isset($_POST[&quot;code&quot;])){
          $id = $_POST[&quot;code&quot;];
          $get_c = $pdo-&gt;prepare(&quot;SELECT * FROM all_menu WHERE `item_name` = '&quot;.$id.&quot;'&quot;);
          $get_c-&gt;execute(); 
          while ($row = $get_c-&gt;fetch()) {
              $code .= $row['price'];
          }
          echo $code;
      }
  ?&gt;
  </code></pre>
  <p>JQuery code:</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    var i=1;
      $('#add').click(function(){
      i++;
      $('#append').append('&lt;div class=&quot;form-group&quot;&gt;&lt;label class=&quot;control-label col-lg-4&quot;&gt;&lt;/label&gt;&lt;div class=&quot;col-lg-4&quot;&gt;&lt;div class=&quot;box&quot;&gt;&lt;header&gt;&lt;h5&gt;تفاصيل الطلب&lt;/h5&gt;&lt;/header&gt;&lt;div class=&quot;body&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label class=&quot;control-label col-lg-2&quot;&gt;الصنف&lt;/label&gt;&lt;div class=&quot;col-lg-10&quot;&gt;&lt;select id=&quot;itemname'+i+'&quot; name=&quot;itemname[]&quot; class=&quot;form-control&quot;&gt;&lt;option disabled selected&gt;اختر الصنف&lt;/option&gt;&lt;?php echo getValues($pdo); ?&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label class=&quot;control-label col-lg-2&quot;&gt;السعر&lt;/label&gt;&lt;div class=&quot;col-lg-10&quot;&gt;&lt;input type=&quot;text&quot; id=&quot;price'+i+'&quot; name=&quot;price[]&quot; placeholder=&quot;-&quot; readonly class=&quot;form-control&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label class=&quot;control-label col-lg-2&quot;&gt;الكمية&lt;/label&gt;&lt;div class=&quot;col-lg-10&quot;&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;quantity[]&quot; id=&quot;quantity&quot; value=&quot;0&quot; min=&quot;1&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
      $('#itemname'+i+'').change(function(){
        var code = $(this).val();  
         $.ajax({
            type: 'POST',
            url: 'pages/GetPrice.php',
            data:{code:code},
            success: function(data){
              document.getElementById(&quot;price&quot;+i+&quot;&quot;).value = data;
            },
            error: function (jqXHR, textStatus, errorThrown){ 
              alert(errorThrown);
            }
         });
      });
      });
  });
  &lt;/script&gt;
  </code></pre>