In Django, how to modify field names in dynamic forms using Java Script

Question

I created a form. Using jQuery got first para of form. Using add function I am adding it again. With this I am getting same names for all the new fields. I am not able to retrieve its values in views.py.

Is there any way to change form field names in js? or any other solution to it?

JS Function:

$(".add").click(function() {
    $("form > p:first-of-type").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

With this JS I am cloning this lines,

<input type="text" name="med" maxlength="100" required id="id_medicine">

While sending it back, I need to change name of the input field(med to med1). So, that I can fetch all values in views.py

Answer 1

You are just cloning what is there on first para of form, use input name as array and use different empty inputs with same array name when adding of next para. for eg-

<div class="row">
 <input type="text" name="arr1[]" >
 <input type="text" name="arr2[]" > 
</div>
<button id="add"> Add</button>
    
  $('#add').click(function(){
    
      $('.row').append('<input type="text" name="arr1[]" ><input type="text" name="arr2[]">');
    })