title: PHP: trying make ajax call from foreach loop
body: <p>I am looping through data form a database to a form that makes a Ajax request to add an item to a shopping basket/cart. Everything works fine except that only the first item in the array is added? I have tried using classes as apposed to id's(unique</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>echo "&lt;div class='col-100 border-temp bg-orange'&gt;"; 
  echo "&lt;div class='col-50 border-temp'&gt;"; 
  
  foreach ($result as $key =&gt; $result) { 
    $m = $result["model_no"]; 
    $q = $result["qty_available"]; 
   
    echo "&lt;form method='post' action='/stock-clearance' class='stock_clearance bg-blue'&gt;"; 
    echo "&lt;label for='model_no'&gt;&lt;h2&gt;Model No&lt;/h2&gt;&lt;/label&gt;"; 
    echo "&lt;input id='model_no' name='model' type='text' placeholder='Paste model no... ' value='$m' /&gt;"; 
    echo "&lt;span id='model_error'&gt;&lt;/span&gt;"; 
    echo "&lt;label for='quantity'&gt;Quantity&lt;/label&gt;&lt;br /&gt;"; 
    echo "&lt;input id='quantity' name='quantity' value='1' type='number' min='1' max='$q'&gt;"; 
    echo " &lt;span id='quantity_error'&gt;&lt;/span&gt;"; 
    //echo "&lt;input id='sc_add_to_cart' name='' value='$key' type='button'&gt;"; 
    echo "&lt;input id='sc_add_to_cart' name='sc_add_to_cart' value='Add to Basket' type='submit'&gt;"; 
    echo "&lt;/form&gt;"; 
  } // End foreach loop 
  echo "&lt;/div&gt;"; </code></pre>
  </div>
  </div>
  </p>
  
  <p>)
  My JS code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#sc_add_to_cart').on('click', function(e) {
  
          e.preventDefault();
          var form = $('.stock_clearance');
          hideStockClearanceMessages(form);
  
          var request = $.ajax({
              beforeSend: function() { form.css({ opacity: 0.4 }); },
              url: 'ajax.php',
              cache: 'false',
              data: {
                  action: "sc-add-to-cart",
                  model: $('input[name="model"]').val(),
                  quantity: $('input[name="quantity"]').val()
              }
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://i.stack.imgur.com/M0irt.png" rel="nofollow">enter image description here</a></p>