I have a block of html code that's being generated by PHP function that's executed using an ajax request, and I want to add to this html a toggle button that will change several fields in the this block of UI (and also the text inside the button itself).

My idea was to create the new fields within the same PHP function but with display=none and have a css class to the fields e.g .new to all of the new fields and .old to the old fields that shouldn't appear, then hide all of the .old fields and display the new ones (and vise versa) using JS function when the button is clicked.

another approach is to build another similar PHP function to build the new UI (even though most of the elements are similar) and the new button will have an onclick function that makes an ajax call to run the corresponding PHP function.

I'm not sure which is the right approach in this case, or is there a simpler/better solution.

would appreciate any feedback. if any additional info is needed let me know.