Embedding code on a page?

Question

JavaScript

Hello everyone
The task is the following. There is a form. When you click on the "plus" button, a new item should appear in the form (an item is, roughly speaking, a group of inputs).
How to implement it intelligently?
My options:
0. ̶V̶ ̶j̶s̶ ̶s̶o̶z̶d̶a̶t̶̶ ̶p̶e̶r̶e̶m̶e̶n̶n̶u̶yu̶ ̶v̶a̶r̶ ̶i̶n̶p̶u̶t̶ ̶ = ̶ ̶'̶ <̶ ̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶ = ̶ "̶t̶e̶x̶t̶" ̶> ̶ <̶ ̶ / ̶i̶n̶p̶u̶t̶> ̶ ........ '̶ ̶i̶ ̶i̶n̶s̶e̶r̶t̶i̶t̶̶ ̶v̶ ̶k̶o̶d̶ ̶n̶a̶zh̶a̶t̶i̶i̶ ̶n̶a̶ ̶p̶l̶yu̶s̶i̶k̶
1. Make a "template" of the item, hide it (wrap it in display:none, for example) and each time you add an item to the form using jquery, just duplicate the template. Also, use jq to specify attributes for each field of the item
2. Submit a request for backing which will generate the html code of the new item and return it to the client. Next, js will insert the code
But something tells me that there are solutions that are much more optimal and less crutch. Could you tell?
Beck on php, js/jq front