Is my approach to dynamically populating web content ok?

Question

I'm porting my JavaFX application to a web based version, which I'm new to. In my web app the user can search the server database for records.

At present I've chosen to present the records in a Bootstrap "accordion". Rows contain basic information, and the row contents is populated with a form, which is generated from a string I store in my JS with which I use replace to dynamically rename the form elements for each row. When a user clicks a row, the accordion expands that row to view the form. The form is basically duplicated for each row.

Q: Is this approach something modern browsers can handle? I mean, I could end up with 25 accordion rows (that's my maximum limit per page), each row of which has a form inserted into it.

My thoughts are either: (i) this is a bad design choice to begin with, or (ii) there are frameworks out there which handle this sort of thing.

If (i) then I should just have a separate "editing/viewing" form which is used by all records.

If (ii), then is my approach still valid, since a "higher" framework would still need to do all the work I mention above under the bonnet, so to speak.

Answer 1

I'd add this is as a comment if my user rep would allow it BUT my 2 cents:

Rather than making the user's browser do all of the work of replace on all those sections which will slow down the load time, try to modify your user experience to account for only the user's interaction. Create a JSON manifest or API endpoint to load in that form when they click on the accordion so you have a quicker load time.