Create HTML elements via JavaScript / JQuery

Hi! I have created an HTML form for a curriculum generator and only have inputs in the field "work experience" to record an experiment.

HTML:

 

work experience




JAVASCRIPT:

Function addRemoveExp () {
$ ("prof-exp") .clone (). appendTo ("#professional-info");} document.getElementById ("add-exp") onclick = function () {addRemoveExp ()};

As you can see, I have left a button to add another experiment so that the user can register new experiences if they wish.
So far, I try to apply the methods Clone () and appendTo () from jQuery, but this solution does not work because:

  1. Each click on the "Add" button doubles the current number of divs with the class .prof-exp.

  2. As soon as he finishes the first experiment and clicks on the "Add another experiment" button, all data for the experiments below will be cloned.

That means it's not good. I just want to replace the empty fields so that the user fills them with their other experiences. How do I do that?

How do I solve this? I do not know what else to do, I really want to solve this challenge! Thank you, guys, for any attempt to help.

I'm still developing and do not know much yet. If I'm too lazy, I'm sorry