Presently, I am involved in developing a project titled : Tennis Club Management using a blend of Javascript, HTML, CSS, and Bootstrap. This project encompasses several HTML pages and a JS file such as index.html, profile.html, manageFees.html, index.js, etc. One notable feature is found in the manageFees.html page, where a dynamic table is generated using online API data upon page load. There is also a noteworthy button, Add Fees, that when activated, presents input fields in the table for saving the fees of clients. Moreover, upon clicking the save button, the table below displays the saved data, accompanied by icons for delete and update.
The issue arises when the table contains multiple records, as the delete icon seems to function only on the last row. Furthermore, upon clicking the update icon for a specific row, the data pertaining to that row should reappear in the table inputs, allowing for necessary modifications and subsequent saving.
To access the JS Fiddle Link, kindly refer to https://jsfiddle.net/mohitsharma1991/Lruzv2mh/1/
Displayed below is the relevant code file
Here is the content of manageFees.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Fees</title>
.
.
.
.
.
</body>
</html>
Below are visual representations in the form of screenshots
https://i.sstatic.net/zsnIc.png
https://i.sstatic.net/SkF9G.png
https://i.sstatic.net/4SMVL.png
https://i.sstatic.net/k8k4j.png
https://i.sstatic.net/e6oHr.png
https://i.sstatic.net/4d5X6.png
If you have any suggestions or solutions, please feel free to share them.