Check out the Bootstrap UI I created in the screenshot below:
https://i.sstatic.net/NnZzI.png
Here's the code.
When a user clicks on the accept button in the new orders table, I want 'food 1' to move to the 'accepted' table. My current code doesn't seem to be working. How can I fix this?
Javascript:
function append() {
// Code...
if (!('#btnOne').onclick) {
var htmlrows = "";
var htmltablestart = '<table class="table table-hover borderless">';
htmlrows = htmlrows + '<tr><td>' + foodOne + '</td><td class="pull-right"> <button type="button" class="btn btn-primary" onclick="appendComplete();" id="btnThree">Completed</button> </td><td></tr>';
var htmltableend = '</table>';
var htmlTable = htmltablestart + htmlrows + htmltableend;
('#acceptedOrdrDiv').append(htmlTable);
alert('you have accepted the order');
} else {
alert('you have not accepted the order');
}
}
function appendComplete() {
// Code...
if (!('#btnThree').onclick) {
var htmlrows = "";
var htmltablestart = '<table class="table table-hover borderless">';
htmlrows = htmlrows + '<tr><td>' + foodOne + '</td></tr>';
var htmltableend = '</table>';
var htmlTable = htmltablestart + htmlrows + htmltableend;
('#completedOrdrDiv').append(htmlTable);
alert('you have completed the order');
} else {
alert('you have not completed the order');
}
}
In addition, I would like it so that when an accepted order is clicked on the 'Accept' button, it gets removed from the 'new order' table.