Javascript Formset

Question

我在添加按钮点击时添加更多表单字段，我做了但是我有一个问题，还有一个删除按钮，它重复多次，当我点击添加按钮时我不想重复。

$('<span class="addButton"> ADD </span>').appendTo('.myForm');
$('<span class="removeButton"> DELETE </span>').appendTo('.myForm');

$('body').on('click', '.addButton' , function(){
    $('.myForm:first').clone().insertAfter('.myForm:first').find("input,select").val('');
    $('.addButton').remove();
    $('.removeButton').add();
    $('<span class="addButton"> ADD </span>').appendTo('.myForm:last');
    $('<span class="removeButton" style="display: block;"> DELETE </span>').appendTo('.myForm:first');

    $('.removeButton').on('click', function(){
        $('.myForm:last').remove();
        $('.addButton').add();
        $('.removeButton').remove();
        $('<span class="addButton"> ADD </span>').appendTo('.myForm:last');
    });
});

/* Form Submit Script */

    var studentName;
    var studentFather;
    var studentSection;
    const myConstant = 'For-Test';

    $('#submitBtn').on('click', function(){
        studentName = $('#std_Name').val();
        studentFather = $('#std_Father').val();
        studentSection = $('#std_Section').val();

        console.log(studentName, studentFather, studentSection);
    });

/* Form Submit Script */