Dynamic add of a row in a table with the possibility to add a cell's content in JS/JQuery

Question

Been trying to have this table to dynamically add a row using the button 'addrow' and in the first cell there should be a 'delete' button in all cells except for the first one in the table, i'm working with a django form, the code is a total mess for the moment trying to figure out the right methods first, but yeah here is my html:

<table class="interface-table" id="interface-table">
                    <tr class="row-interfaces main-table-header">
                        <th colspan="2" class="head-row"></th>
                        <th colspan="5" class="head-row">a</th>
                        <th colspan="5" class="head-row">b</th>
                        <th colspan="5" class="head-row">c</th>
                        <th colspan="5" class="head-row">d</th>
                    </tr>
                    <tr class="row-interfaces secondary-table-header">
                        <th colspan="1" class="sz-1">Delete</th>
                        <th colspan="1" class="sz-1">e</th>
                        <th colspan="1" class="sz-1">f</th>
                        <th colspan="2" class="sz-2">g</th>
                        <th colspan="2" class="sz-2">h</th>
                        <th colspan="3" class="sz-3">i</th>
                        <th colspan="2" class="sz-2">j</th>
                        <th colspan="1" class="sz-1">k</th>
                        <th colspan="2" class="sz-2">l</th>
                        <th colspan="2" class="sz-2">m</th>
                        <th colspan="3" class="sz-3">n</th>
                        <th colspan="2" class="sz-2">o</th>
                    </tr>

                    {% for form in ipforms %}
                    <tr id="new-row" class="row-interfaces secondary-table-header">
                        {% if not forloop.first %}
                        <th colspan="1" class="sz-1" id="col0">
                            <button type="button" class="btn delete-btn remove_row" onclick="deleteRow(this)">Delete</button>
                        </th>
                        {% else %}
                        <th colspan="1" class="sz-1"></th>
                        {% endif %}
                        <th colspan="1" class="sz-1" id="col1"> {{form.e}} </th>
                        <th colspan="1" class="sz-1" id="col2">{{form.f}}</th>
                        <th colspan="2" class="sz-2" id="col3">{{form.g}}</th>
                        <th colspan="2" class="sz-2" id="col4"></th>
                        <th colspan="3" class="sz-3" id="col5">{{form.i}}</th>
                        <th colspan="2" class="sz-2" id="col6">{{form.j}}</th>
                        <th colspan="1" class="sz-1" id="col7">{{form.k}}</th>
                        <th colspan="2" class="sz-2" id="col8">{{form.l}}</th>
                        <th colspan="2" class="sz-2" id="col9"></th>
                        <th colspan="3" class="sz-3" id="col10">{{form.n}}</th>
                        <th colspan="2" class="sz-2" id="col11">{{form.o}}</th>

                    </tr>
                    {% endfor %}
                </table>

I tried this for my js script :

function addRow() {
    var table = document.getElementById("interface-table");
    var newRow = document.getElementById("new-row").cloneNode(true);
 
    newRow.removeAttribute("id");
    var deleteCell = newRow.querySelector(".sz-1");
    deleteCell = document.getElementById("col0").innerHTML;
    table.appendChild(newRow);

}

function deleteRow(button) {
    var row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

the problem is all the rows get added without the delete button ( it's like with duplicating it always counts as the first row) and it gets added after i apply the form, have been trying a lot of ways (copying cell by cell, jquery that's not my strongest spot) but it just doesn't work, if you guys can hint me at this that'd be much appreciated.