My current situation is as follows:
Upon examining the result, you will notice that in the first row, there are buttons labeled "Change" and "Delete".
If you click on this row, an additional button labeled "Add" will appear.
This specific row is not functioning as intended.
Now, direct your attention to the next row which is not yet in the basket. When you select this row, only an "Add" button appears. Clicking again will make it disappear. This functionality works correctly.
My problem arises when the item is in the basket. I do not want the "Change" and "Delete" buttons to be displayed initially, but rather only when the row is highlighted (clicked). Additionally, the "Add" button somehow activates and appears, which should not happen.
How can I resolve this issue? Although my JavaScript code may seem messy, particularly the append section where all the HTML is located, I have been unable to find a more efficient method for appending data to the table.