Form in modal form with symfony2 and jquery not presented with data

I have a list of schools displayed on my list. html.twig. For each school, I need to insert some data that is filled in the form inside the modal. I need that after filling out the form, the modal form is presented and closed, displaying the background page again. Usually the submit action of the modal reasons page is updated and I want to explicitly avoid this.

The inspiration for the code was this tutorial , in particular I followed the creation of the form ...

    //school controller 
    $school = new School();
    $form = $this->createForm(
        new SchoolFormType($param),
        $school,
        array(
            'action' => $this->generateUrl("school_modal_vp", array(
                'param' => $param,
            )),
            'method' => 'POST'
    ));

    if($request->isMethod('POST')) {
        $form->handleRequest($request);
        if($form->isValid()) {
            $data = $form->getData();
            $em->persist($data);
            $em->flush();
            $response = new Response(json_encode([
                'success' => true,
            ]));
            $response->headers->set('Content-Type', 'application/json');

            return $response;
        }
    }

      

        
        
        
      

    

... and a function that "replaces" the action of submitting the modal with an AJAX call with the form data, storing it in the database and closing the modal.

<script>
var param_id = '{{ param.id }}';

function sendForm(form, callback) {
    // Get all form values
    var values = {};
    $.each( form[0].elements, function(i, field) {
        if (field.type != 'checkbox' || (field.type == 'checkbox' && field.checked)) {
            values[field.name] = field.value;
        }
    });
    // Post form

    console.log(values);
    $.ajax({
        type        : form.attr( 'method' ),
        url         : form.attr( 'action' ),
        data        : values,
        success     : function(result) { callback( result ); }
    });
}

$(function() {
    $("#school_"+param_id+"_save").on("click", function( e ) {
        e.preventDefault();
        sendForm($("#myModalSchool_" + param_id).find('form'), function (response) {
            $("#myModalSchool_" + param_id).modal('hide');
        });
    });
});
</script>

      

        
        
        
      

    

However, this only works for the last modal created when listing schools. Any help is appreciated, and please if you need to know the details.

EDIT 1:

This is a template on demand

<div class="modal fade" data-backdrop="static" id="myModalSchool_{{ param.id }}">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h3 class="modal-title">
                School
            </h3>
        </div>
        <div class="modal-body">
            <form id="school_{{ param.id }}" name="school_{{ param.id }}" method="post" action="{{ path('school_modal_vp', {param_id: param.id, }) }}" class="form-horizontal">
                {{ form_errors(form) }}
                {{ form_rest(form) }}
                {{ form_end(form) }}
        </div>
    </div>
</div>