Part-DB.Part-DB-server/templates/Parts/edit/_lots.html.twig

{% set delete_btn %}
    <button type="button" class="btn btn-danger lot_btn_delete" onclick="delete_lot_entry(this);"
            {% if not is_granted('lots.delete', part) %}disabled{% endif %}>
        <i class="fas fa-trash-alt fa-fw"></i>
        {% trans %}part_lot.delete{% endtrans %}
    </button>
{% endset %}


<table class="table table-striped table-sm" id="lots_table" data-prototype="{% if form.partLots.vars.prototype is defined %}{{ form_widget(form.partLots.vars.prototype)|e('html_attr') }}{% endif %}">
    <tbody>
    {% for lot in form.partLots %}
        <tr>
            <td>
                {{ form_widget(lot) }}
            </td>
            <td>
               {{ delete_btn }}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<button type="button" class="btn btn-success" onclick="create_lot_entry(this)"
        {% if not is_granted('lots.create', part) %}disabled{% endif %}>
    <i class="fas fa-plus-square fa-fw"></i>
    {% trans %}part_lot.create{% endtrans %}
</button>

<script>
    function delete_lot_entry(btn) {
        window.bootbox.confirm('{% trans %}part_lot.edit.delete.confirm{% endtrans %}', function (result) {
            if(result) {
                $(btn).parents("tr").remove();
            }
        })
    }

    function create_lot_entry(btn) {
        //Determine the table, so we can determine, how many entries there are already.
        $holder = $("#lots_table");

        var index = $holder.find(":input").length;
        var newForm = $holder.data("prototype");

        //Increase the index
        newForm = newForm.replace(/__name__/g, index);
        newForm = '<td>' + newForm + '</td>';
        $newFormRow = $('<tr></tr>').html(newForm);

        //Add delete button
        $btn = '<td>' + '{{ delete_btn|e('js') }}' + '</td>';
        $newFormRow.append($btn);

        $holder.append($newFormRow);

        //Reinit the selectpickers
        $(".selectpicker").selectpicker();

    }
</script>