I'm in the process of developing a travel reimbursement form for my workplace. We have 4 distinct categories of travel, which led me to come up with a solution involving individual buttons for each category. Upon clicking a button, the corresponding form would then display within its designated <section>. Leveraging Bootstrap 4, I've set up all forms on my index.html file with the "d-none" class to ensure none are visible upon initial loading.
One particular section of the form pertains to mileage calculation, featuring Font-Awesome plus and minus icons to add or remove rows dynamically. The issue arises when the event listeners associated with these actions only function correctly within the first form listed in the index.html file. Subsequently, they fail to work as intended within the second form.
Both forms share the same class ".mileage-form". While aware that multiple HTML elements cannot have identical IDs, I assumed using classes should pose no problem. To resolve this hurdle, some might suggest rendering the HTML via JavaScript upon button click rather than simply revealing it, although I seek a deeper understanding of why my current approach falls short.
Simplified excerpts from the index.html showcase:
<!----------------------------- ITINERANT TRAVEL ----------------------------->
<section id="itinerant" class="d-none">
<!-- Form content goes here -->
</section>
<!-------------------- Single Day Travel ----------------------->
<section id="single-day" class="d-none">
<!-- Another form resides here -->
</section>
In addition to this setup, the relevant event listeners have been defined as follows:
document.querySelector('.add-row').addEventListener('click', mileage.addRow);
document.querySelector('.delete-row').addEventListener('click', mileage.deleteRow);
The functions responsible for adding and deleting rows are encapsulated within a Mileage Class, seemingly operating efficiently with the "Itinerant" section but encountering difficulties with the "Single Day" segment. Curiously, upon isolating either of the sections by commenting out the other, the functionality works seamlessly. However, having both present while hidden reveals an inconsistency in behavior, favoring the Itinerant section. For more details regarding the code implementation, feel free to explore my project repository on GitHub, particularly referencing the mileage.js file.
Your insights into where I may have erred would be highly valued!