How to submit multiple forms in single submit

Question

I have the following form created in my HTML, this will be submitted to "url 'submitrecord'". This will work fine for single entry per HTML. How can I add multiple entries of this type and submit at once.

Code:

<form method='POST' action="{% url 'submitrecord' %}">
      <div class="row">
             <div class = "col-md-1 form-group">
                    <input type="text" class="form-control" name="EntryNo"  placeholder="EntryNo"/>
            </div>
            <div class = "col-md-2 form-group">
                    <input type="text" class="form-control" name="MedicineName" placeholder="MedicineName"/>
            </div>
                    <button type="submit" class="btn btn-default">Done</button>
    </div>       
</form>

Answer 1

I found this answer but still it isnot sending the request to my URL.

<script>
$(document).ready(function(){
 var called = 0;
ajax_recaller = function(forms){
$.ajax({
type: "POST",
data: forms[called].serialize(),                             
url: forms[called].attr('action'),                        
success: function(data) {
called++;                                                                        
 if(called < forms.length) {
ajax_recaller(forms);                                        
} else {
called=0;                                                                    // set called value to 0 again
alert('All forms has been submitted!');
}

}
});

}


$(document).on('click','.submitforms',function(){
var x=0;

$('.ajax_form').each(function(){
forms[x] = $(this);
x++;
});

ajax_recaller(forms);
});

});
</script>