Adding a dynamic field via javascript on RoR

Question

I would like to add dynamically fields to a form in a ERB file and I'm getting an issue that I don't know how to fix.

Basically, a user clicks a btn on a form and a new input text field is added via javascript. Right now, my code looks like this:

 <div class="form-group row"> <button type="button" class="btn onclick="addManualInputFieldBtnPressed()">Add a manual input field</button> </div> <div id="manual_input_fields"> </div> 

and my javascript looks like this:

<script> var fields_index = -1; function addManualInputFieldBtnPressed() { fields_index += 1; $("#manual_input_fields").append('<div class="form-group row">\ <%= form.label :new_text, class:"col-lg-3" %>\ <div class="col-lg-9">\ <%= form.text_area :new_text, class:"form-control", size: "20x5" %>\ </div>\ </div>'); } </script> 

If I add simple text it works, but as if I have the code above, I'm getting...

undefined local variable or method `form' for #<#<Class:0x00007fbf5c719940>:0x00007fbf5cc13108> Did you mean? for fork 

I also tried with this code on my javascript part and I get a different error (related to rendering) but it didn't work either.

$("#manual_input_fields").append('<%= escape_javascript(<div class="form-group row">\ <%= form.label :description, class:"col-lg-3 font-weight-bold text-dark col-form-label form-control-label text-2" %>\ <div class="col-lg-9">\ <%= form.text_area :description, class:"form-control", size: "20x5" %>\ </div>\ </div>).html_safe %>'); 

Can someone point me to the right direction? I suppose that it must be something obvious but I'm a newbie on RoR.