Save data in database using synfony 3.4 and dynamic table

good afternoon. I have some doubts when it comes to how to save data in the database. I am using the synfony 3.4 framework to save the data with the form in my database, but I have found a problem. When making a delivery note I need to add different products and I do not know how to do it.

The jquery script works well, because it adds to the table what I put it, but to be able to save the new data, that new row should be like another new form, right? I do not understand very well.

 $("#add").click(function(){
            // Obtenemos el numero de columnas (td) que tiene la primera fila
            // (tr) del id "tabla"
            var tds = $("#tabla tr:first td").length;
            // Obtenemos el total de filas (tr) del id "tabla"
            var trs = $("#tabla tr").length;
            cant = $('#contador-filas').val();                
            //var nuevaFila = "<tr class='fila' id='fila'>";
            cant++;
            $('#contador-filas').val(cant);        
            nuevaFila+="<td><input class='form-control' type='text' name='cantidad["+(cant)+"]' placeholder='cantidad"+(cant)+"' required /> </td>"+
                    "<td><input class='form-control' type='text' name='articulo["+(cant)+"]' placeholder='articulo"+(cant)+"' required /> </td>"+
                    "<td><input class='form-control' type='text' name='precio_en["+(cant)+"]' placeholder='precio_en"+(cant)+"' required /> </td>"+
                    "<td><input class='form-control' type='text' name='precio_sa["+(cant)+"]' placeholder='precio_sa"+(cant)+"' required /> </td>";

            nuevaFila += "</tr>";
            $("#tabla").append(nuevaFila);

And this is the symfony form

<table class="table table-responsive" id="tabla">
                    <thead>
                    <tr>
                        <th>Codigo</th>
                        <th>Concepto</th>
                        <th>Precio</th>
                        <th>Cantidad</th>
                        <th>Importe</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="fila-0" id="fila">
                        <input type="text" hidden="hidden" id="contador-filas" value="1" />
                        <td><input class="form-control col-md-2" id="idProductoVin"   style="width: 65px" readonly/></td>
                        <td>{{ form_widget(form.idProductoVi, { 'attr': {'class': 'form-control col-md-7 col-xs-12',
                                'required': 'required', 'id':'productosVin', 'onchange':'elegirProductoVin(this);'} }) }}</td>
                        <td><input class="form-control col-md-2" id="precioProductoVin" style="width: 70px" readonly/></td>
                        <td>{{ form_widget(form.cantidad, { 'attr': {'class': 'form-control col-md-7 col-xs-12', 'required': 'required', 'id':'cantidad'}} ) }}</td>
                        <td>{{ form_widget(form.importe, { 'attr': {'class': 'form-control col-md-7 col-xs-12', 'required': 'required', 'id':'importeProductoVin'} }) }}</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>

    <div class="ln_solid"></div>
    <div class="form-group">
        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
            <button class="btn btn-danger" type="button">Cancelar</button>
            <button class="btn btn-primary" type="reset">Borrar</button>
            <button type="submit" class="btn btn-success" data-toggle="modal"
                    href="#md_nuevoSociOk">Aceptar
            </button>
        </div>
    </div>

    {{ form_end(form) }}
    <div >
        <button id="add" class="btn btn-sm btn-success">Agregar</button>
        <button id="del" class="btn btn-sm btn-danger">Eliminar</button>
    </div>
</div>

Thank you very much and I hope you can help me!