jquery-the output is always in the first item only - php

Question

I am trying to create a web store and I use Jquery in radio button for selecting a category but the output is always on the first item only not in each items.
here is the jquery code
function populateswatches() {
var swatchesName = $('input[name=optradio]:checked').val();
$.getJSON('getdata.php', {swatchesName: swatchesName}, function(swatch) {
var html = '';
$.each(swatch, function(index, array) {
html = html + '<div class="col-md-3 w3-margin-top"><div class="w3-display-container w3-hover-opacity"><div class="w3-center"><input type="radio" name="swatches_code" value="' + array['swatches_code'] + '" required></div><div class="w3-display-middle w3-display-hover"><button type="button" class="btn btn-primary"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button></div><img src="../backend/functions/images/'+array['images']+'" style="width:100%"><div class="w3-center">' + array['swatches_code']+'</div></div></div>';
});
$('#swatches').html(html);
});
}
$(function() {
$(this).change(function() {
populateswatches();
});
});
here is the code for php. it is not complete though.
$priceSQL="SELECT * FROM price WHERE id_item='$IDitem'";
$priceRES=mysqli_query($conn,$priceSQL);
while($priceROW=mysqli_fetch_assoc($priceRES)){
$id_categ=$priceROW["id_category"];
$catSQL="SELECT * FROM category WHERE id_category='$id_categ'";
$catRES=mysqli_query($conn,$catSQL);
while($catROW=mysqli_fetch_assoc($catRES)){
echo '
<div class="radio">
<label><input type="radio" name="optradio" value="'.$priceROW["price"].'-'.$id_categ.'" required>'.$catROW["swatches_category"].'- ₱'.formatMoney($priceROW["price"]).'</label>
</div>
';
}
}
</li>
</ul>
<h4>SWATCHES</h4>
<div class="form-group">
<span id="swatches"></span>
</div>
<input type="hidden" value="'.$IDitem.'" name="id_item">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Add to Cart</button>
here is the output
here is the image output for it

Answer 1

Reason:-
id is treated as unique identifier in jQuery.Since all spansin your code have same id, that's why code only working for first-one.
Solution:-
Convert id to class in your HTML code like below:-
<span class="swatches"></span>
And change # to . in jQuery like below:-
$('.swatches').html(html);
Note:- class is treated as a group identifier in jQuery and work on each element which share same class.