i am working the task of billing page but i have an issue on the page . issue is To click display images or scroll down button to view html table with add qty and total price examples enter image description here
but have an issue this part i have an send codes please give the solution friends
I want exact output like this pic enter image description here
var food = {
data: [{
"SNO": 1,
"ItemName": "cofee Black",
"Price": "$13.50",
"Purchased": 44,
"Sold": 14,
"InStock": 30,
"Type": "Drinks",
"Status": "Available",
"Image": "image/img1.JPG",
},
{
"SNO": 2,
"ItemName": "Tea Black",
"Price": "$11.50",
"Purchased": 91,
"Sold": 27,
"InStock": 64,
"Type": "Drinks",
"Status": "Available",
"Image": "image/img2.JPG"
},
]
}
$('document').ready(function() {
$('#image').click(function() {
var cart2 = JSON.parse(localStorage.getItem('food'));
$.each(cart2.data, function(key, value) {
$('#display').append(
`<tr>
<td>${value.ItemName}</td>
<td>${value.SNO}</td>
<td>${value.Price}</td>
<tr>`)
});
});
});
$(document).ready(function() {
var cart = JSON.parse(localStorage.getItem('food'));
$.each(cart.data, function(key, value) {
$('#image').append(
`<div class='row-sm-3'>
<button id="clickbt">${value.ItemName}</button>
</div>`);
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table" id="it1">
<thead>
<th>Item</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Total Price</th>
</thead>
<tbody id="display">
</tbody>
</table>