title: Render data fetched by ajax request in the correct spans
body: <p>I am fetching the class from the database the $row['code] will insert a unique class to each span</p>
  
  <pre><code>&lt;?php 
  $query =  "SELECT * FROM `products`";
  $result = $con-&gt;query($query);
  if ($result-&gt;num_rows &gt; 0) {
   while($row = $result-&gt;fetch_assoc()) { ?&gt;
    &lt;div class="col-sm-3 service"&gt;
      &lt;div class="name"&gt;&lt;?php echo $row['service'] ?&gt;&lt;/div&gt;
         In stock&lt;span class="stock &lt;?php echo $row['code'] ?&gt;"&gt;&lt;/span&gt;&lt;br&gt;
         &lt;div&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;?php }
  }
  ?&gt; 
  </code></pre>
  
  <p>I want to insert the correct stock in each span which i get from the ajax request. The below code doesn't work it inserts the first value from the array of stock in all the spans.
  Also I would like to know which method would me more efficient inserting the stock from the api on page load in the products table and then outputting it all or using the below code to show the stock by matching the class name as stock comes from different api.</p>
  
  <pre><code>$.ajax({
          type: 'post',
          url:"stock.php",
         dataType:'json',
         data: {country: $("#selCountry").val()},
          success: function(data, status){
        data = data.map(x =&gt; JSON.parse(x));
         console.log(data);
        $(".stock").html(data[0].online);
         var d = document.querySelectorAll('.service span');
         for(i=0; i&lt;d.length; i++) {
          if($('span.stock').hasClass("srv1")) {
            $(".stock").html(data[0].stock);
          }
           if($('span.stock').hasClass("srv41")) {
            $(".stock").html(data[1].stock);
          }
         }
      }
    });
  </code></pre>
  
  <p>...</p>
  
  <pre><code>data[i].service_name and $row['service']
  </code></pre>
  
  <p>can also be matched to determine the correct stock value from the data array of objects  but I am confused how and where to use it.</p>