add to favorites div function not behaving as expected

I’m creating a dashboard page for a reporting server we have here on site. It’s just a collection of links to reports and a brief description of them. I thought it would be nice to allow users to keep a collection of their favorite reports in a div at the top of the page be checking a box next to the report. I’ve got a js file that is to handle the storing of favorites in localstorage and updating the favorites div on page loads or when a user clicks a checkbox to add it or an X button I fudged to remove it. The first block of code is a snapshot of a portion of the body of the page. The second is the js file. The problem I’m seeing is if there is already a checkbox checked and I check a second box. It seems to be adding the wrong p element although when I deselect some check boxes it sorts itself out. Any help with this weirdness would be appreciated!

<h2>Report Server Dashboard<a href="https://www.freecounterstat.com" title="free website counter"><img src="https://counter6.optistats.ovh/private/freecounterstat.php?c=c4af1t599kzkrhdd7yl7z7qx81nnwrcq" border="0" title="website counter" alt="website counter" style="float:right;"></a></h2>
<div class="ng-binding">
<div class="innerdiv" style="padding-left: 8px; padding-right: 18px; float:left;">
<a style="text-decoration: none" href="/Reports/report/ReportsRun" title="Click here to run a report showing your last 30 days of reports." target="_blank">My last 30 days of reports</a>
</div>
<div class="innerdiv" style="float: inline-start; padding-left: 18px; padding-right: 18px;">
<a style="text-decoration: none" href="mailto:[email protected]?subject=Report%20Server%20report%20or%20customization%20request" title="Click here to start an email to the IT department.">***These are all custom reports displaying information pulled from the live Visual database. If you need a report created or modified please reach out to the IT department***</a>
</div>
<div class="innerdiv" id="expander" style="float: inline-start; padding-left: 18px; padding-right: 18px;">
<span id="spanner" style="text-decoration: none; cursor: pointer;" title="Click to open all sections"></span>
</div>
</div>
<br>
<!--MY FAVORITES-->
<button class="collapsible_nobutton"><strong>MY FAVORITES</strong> - This section contains reports where you've checked the "Add to MY FAVORITES" checkbox.</button>
<div  id="favorites">
    <p><br></p>
</div>

<br>
<!--INFO REPORTS-->
<button class="collapsible"><strong>INFO REPORTS</strong> - General information reports that don't fall under another specific category</button>
<div class="content">
    <p class="paragraph" data-id="1"><input type="checkbox" title="Add to MY FAVORITES section" class="favorite-checkbox" data-id="1"><a href="/Reports/report/INFO%20REPORTS/Customer%20List" target="_blank">CUSTOMER LIST</a>
     - This report provides a listing of customers with address and contact information. It shows customers with a Last Order Date both in the date range you select and customers with no Last Order Date.</p>
    <p class="paragraph" data-id="2"><input type="checkbox" title="Add to MY FAVORITES section" class="favorite-checkbox" data-id="2"><a href="/Reports/report/INFO%20REPORTS/CUSTOMERS" target="_blank">CUSTOMERS</a>
     - This report provides a listing of customers with address and contact information. It has a filterable drop down containing customer names. It also shows the Last Order Date.</p>
</div>

script.js

    // Load favorites from local storage on page load
    var favorites = JSON.parse(localStorage.getItem('newfavorites')) || [];

    // Update the favorites div
    updateFavoritesDiv(favorites);

    // Handle checkbox clicks
    $('.favorite-checkbox').on('change', function() {
        var index = $(this).index('.favorite-checkbox');
        var isChecked = $(this).is(':checked');

        if (isChecked) {
            favorites.push(index);
        } else {
            favorites = favorites.filter(function(i) {
                return i !== index;
            });
        }

        // Update local storage and the favorites div
        localStorage.setItem('newfavorites', JSON.stringify(favorites));
        updateFavoritesDiv(favorites);
    });



function updateFavoritesDiv(favorites) {
        $('#favorites').empty();
        favorites.forEach(function(index) {
            var $p = $('p').eq(index).clone();
            // Remove the checkbox from the cloned paragraph
            $p.find('.favorite-checkbox').remove();
            var $removeBtn = $('<button class="button" title="Remove from MY FAVORITES section">X</button><span style="width:12px; display: inline-block;"></span>');
            $removeBtn.click(function() {
                // Remove the paragraph from favorites and update the display
                favorites = favorites.filter(function(i) {
                    return i !== index;
                });
                localStorage.setItem('newfavorites', JSON.stringify(favorites));
                updateFavoritesDiv(favorites);
            });
            $p.prepend($removeBtn);
            $('#favorites').append($p);
        });
    }
    
});