Как остановить добавление кнопки удаления в первую форму в djagno formset?

Я создаю динамическую форму, используя наборы форм. В основном, когда пользователь нажимает на кнопку "Добавить поле", создается новая форма, а когда пользователь нажимает на иконку корзины, форма должна быть удалена!

Теперь проблема в том, что иконка удаления отображается на первой форме по умолчанию, поэтому при нажатии на иконку форма по умолчанию также удаляется! Как добавить иконку удаления на клонированные формы?

<script>
function updateElementIndex(el, prefix, ndx) {
        var id_regex = new RegExp('(' + prefix + '-\\d+)');
        var replacement = prefix + '-' + ndx;
        if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
        if (el.id) el.id = el.id.replace(id_regex, replacement);
        if (el.name) el.name = el.name.replace(id_regex, replacement);
    }

    function addForm(btn, prefix) {
        var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
        var row = $('.dynamic-form:first').clone(true).get(0);
        $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
        $(row).children().not(':last').children().each(function() {
            updateElementIndex(this, prefix, formCount);
            $(this).val('');
        });
        $(row).find('.delete-row').click(function() {
            deleteForm(this, prefix);
        });
        $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
        return false;
    }

    function deleteForm(btn, prefix) {
        $(btn).parents('.dynamic-form').remove();
        var forms = $('.dynamic-form');
        $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
        for (var i=0, formCount=forms.length; i<formCount; i++) {
            $(forms.get(i)).children().not(':last').children().each(function() {
                updateElementIndex(this, prefix, i);
            });
        }
        return false;
    }
</script>
<script>
$(function () {
        $('.add-row').click(function() {
            return addForm(this, 'form');
        });
        $('.delete-row').click(function() {
            return deleteForm(this, 'form');
        })
    })
</script>

Вот сниппеты, которые я использую, мне нужно добавить

<a id="remove-{{ form.prefix }}-row" href="javascript:void(0)" class="delete-row">Delete <em class="icon ni ni-trash-fill text-danger fs-15px"></em></a>

только на клонированной форме, форма по умолчанию не должна содержать этого! Пожалуйста, помогите

Делегат

Замените 'tr' на 'form', если это форма, или '.row' на что угодно, чем является '.row'

$("#tb").on('click', '.delete-row', function() {
  $(this).closest('tr').remove()
});
tbody tr:first-child button.delete-row {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody id="tb">
    <tr>
      <td>Row 0</td>
      <td><button class="delete-row">Click 0</button></td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td><button class="delete-row">Click 1</button></td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td><button class="delete-row">Click 2</button></td>
    </tr>
  </tbody>
</table>

Вернуться на верх