Recently, I've been working on modeling an add to cart feature using jQuery. However, I have encountered a small issue that I'm trying to troubleshoot. When I click the mybtn button, the model displays and functions correctly, but there seems to be a problem with the quantity not updating properly. Can anyone offer suggestions on how to tackle this? Thanks in advance.
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<body>
<div class="shoe single-item hvr-outline-out">
<form method="post" action="#" class="cart">
<input type="hidden" name="id" id="id" id="<%= doc._id%>">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" id="pname_<%= doc._id%>" name="shoe_item" value="<%=doc.product_name%>">
<input type="hidden" id="amount_<%= doc._id%>" name="amount" value="<%=doc.price%>">
</form>
<button type="submit" id="myBtn1_<%= doc._id%>" data-id="<%= doc._id%>" value="<%= doc._id%>" class="shoe-cart pshoe-cart myBtn"><i class="fa fa-cart-plus" aria-hidden="true"></i></button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <br/>
<center>
<table class="row"> </table>
</center>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".myBtn").click(function() {
$('#myModal').modal('show');
});
});
var count = 0;
$(".myBtn").click(function() {
var id = $(this).data('id');
var p_name = $('.cart').find('#pname_' + id).val();
var count1 = count++;
var amount = $('.cart').find('#amount_' + id).val();
var html = "<tr id='tr_'" + id + "><td>" + p_name + "</td><td>" + amount + "</td><td><input type='text' name='count' id='count_" + id + "' size='3' value='" + count + "'></td>/tr>";
var quan = $('.row').find('#count_' + id).val();
if (!quan) {
$('.row').append(html);
} else {
$('#count_' + id).append(count);
}
});
</script>