Validation Problems

Bootstrap 5, jQuery, jQuery Validator - all client side, something goes wrong when adding nav items more than once.

by glacierdave

HTML

<html lang="en" class="h-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css" integrity="sha512-yOW3WV01iPnrQrlHYlpnfVooIAQl/hujmnCmiM3+u8F/6cCgA3BdFjqQfu8XaOtPilD/yYBJR3Io4PO8QUQKWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Include JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js" integrity="sha512-7bS2beHr26eBtIOb/82sgllyFc1qMsDcOOkGK3NLrZ34yTbZX8uJi5sE0NNDYFNflwx1TtnDKkEq+k2DCGfb5w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script...

CSS

.dd 
{
    max-width: 700px;
}
/** Nestable Draggable Handles */
.dd3-content 
{
    display: block;
    height: 30px;
    margin: 5px 0;
    padding: 5px 10px 5px 40px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.dd3-content:hover 
{
    color: #2ea8e5;
    background: #fff;
}
.dd-dragel > .dd3-item > .dd3-content 
{
    margin: 0;
}
.dd3-item > button 
{
    margin-left: 30px;
}
.dd3-handle 
{
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 30px;
    text-indent: 30px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #aaa;
    background: #ddd;
    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
    background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
    background: linear-gradient(top, #ddd 0%, #bbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.dd3-handle:before 
{
    content: '≡';
    display: block;
    position: absolute;
    left: 0;
    top: 3px;
    width: 100%;
    text-align: center;
    text-indent: 0;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
}
.dd3-handle:hover 
{
    background: #ddd;
}

JavaScript

// Enable drag and drop nest structure
$('#navTree').nestable({maxDepth: 2}).on();

// Last ID of current nav tree - needed to add new nav items - passed from server side as hidden input value
var lastID = $('#lastID').val();

console.log('Start ID: ' + lastID);

// jQuery Validator - Validation Settings for AddNav form
var validatorAddNav = $("#frmAddNav").validate(
{
    rules:
    {
        formPage:
        {
            required: true,
            letterswithbasicpunc: true,
            rangelength: [3, 20]
        }
    },
    errorPlacement: function(error, element)
    {
      errorInsert = "#" + element.attr("name") + "Error";
      error.appendTo(errorInsert);
    },
    highlight: function(element){$(element).addClass("is-invalid").removeClass("is-valid");},
    unhighlight: function(element){$(element).addClass("is-valid").removeClass("is-invalid");}
});

// AddNav Modal Activated
$("#modalAddNav").on('shown.bs.modal',function()
{
    console.log('AddNav Modal Shown');

    // Set AddNav form focus
    $(this).find('#formPage').focus();

    $('#btnAddNav').click(function(e)
    {
        e.preventDefault(); // Prevent default POST submit

        if ($("#frmAddNav").valid())
        {
            var newID   = ++lastID;
            var newPage = $('#formPage').val();
            
            console.log('Add Button on ID: ' + newID);

            var newLI = 
            '<li id="navItem' + newID + '" class="dd-item dd3-item" data-file="file' + newID + '.php" data-nav="Nav ' + newID + '" data-page="Page ' + newID + '" data-id="' + newID + '">' +
            '  <div class="dd-handle dd3-handle">Drag</div>' +
            '  <div class="dd3-content"><div id="entry1">' + newPage + ' ' + newID + '</div></div>' +
            '</li>';

            $('#modalAddNav').modal('hide'); // Close Modal
            validatorAddNav.resetForm();

            $('#navTree > .dd-list').append(newLI); // Add Nav Item to Tree
        };
    });
});

// Save Nav Tree - this...