Styjun

I have a featured items box that is loop using an "id" to each "Details" button.
My problem is the "Bootstrap 4 modal" uses the values from the first "Details" button that was clicked even if I click on other featured item's "Details" Button

How to reset or clean the values on my "Bootstrap 4 modal not 3 ? because it keeps using the values from the very firts id that was used even if i clicked on other buttons

jQuery Ajax

 var data = "id" : id; //Json string 
 jQuery.ajax(
 url: "/myecommerse/includes/wala2.php",
 type: "POST", 
 data: data, 
 success : function(data)
 jQuery('body').append(data);
 jQuery('#details-modal').modal('toggle'); 
 $('body').on('hidden.bs.modal', '#details-modal', function () 
 $(this).removeData('bs.modal');
 );
 ,
 error : function()
 alert('something went wrong');
 

 );

 }

Modal

<?php




 include '../core/init.php';
 $id = $_POST['id'];

 $sql = "SELECT * FROM products WHERE id = '$id'";
 $result = $db->query($sql);
 $product = mysqli_fetch_assoc($result);


?>



<!-- Modal --> 
<?php
 ob_start();

?>

<div class="modal fade details-modal" id="details-modal" tabindex="-1" role="dialog" aria-labelledby="details-modal" aria-hidden="true">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-header">
 <button class="close" type="button" data-dismiss="modal" aria-label="close">
 <span aria-hidden="true">&times;</span>
 </button>
 <h4 class="modal-title text-center"><?php echo $product['title']; ?></h4>
 <h4 class="modal-title text-center"><?php echo $_POST['id']; ?></h4>
 </div>
 <div class="modal-body">
 <div class="container-fluid">

 <div class="row">
 <div class="col-sm-6">
 <div class="center-block">
 <img src="<?php echo $product['img']; ?>" alt="<?php echo $product['title']; ?>" class="details img-responsive"/>
 </div>
 </div>
 <div class="col-sm-6">
 <h4>Details</h4>
 <p><?php echo $product['description']; ?></p>
 <hr>
 <p>Price: <?php echo $product['price']; ?></p>
 <form action="add_cart.php" method="post">
 <div class="form-group">
 <div class="col-xs-3">
 <label for="quantity">Quantity</label>
 <input type="text" class="form-control" id="quantity" name="quantity">
 </div>
 <p>Available:3</p>
 </div>
 <div class="form-group">
 <label for="size">Size</label>
 <select name="size" id="size" class="form-group">
 <option value="small">Small</option>
 <option value="medium">Medium</option>
 <option value="large">Large</option>
 <option value="extralarge">Extra large</option>
 </select>
 </div>
 </form>

 </div>
 </div>
 </div>
 </div>

 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">Close</button>
 <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shooping-cart"></span>Add to cart</button>
 </div>
 </div>
 </div>

</div> 

<script>
function closeModal() 

 jQuery.('#details-modal').modal('hide');

 $('body').on('hidden.bs.modal', '#details-modal', function () 
 $(this).removeData('bs.modal');
 );

 setTimeout(function()
 jQuery.('#details-modal').remove();
 ,500);

 
</script>

<?php
 echo ob_get_clean();
?>

Thanks for the answer in advance..