Добавить в избранное функция div работает не так, как ожидалось ⇐ Jquery

[Anonymous]

Я создаю страницу панели мониторинга для сервера отчетов, который есть у нас на сайте. Это просто набор ссылок на отчеты и их краткое описание. Я подумал, что было бы неплохо разрешить пользователям хранить коллекцию своих любимых отчетов в блоке div вверху страницы, установив флажок рядом с отчетом. У меня есть js-файл, который предназначен для хранения избранного в локальном хранилище и обновления div избранного при загрузке страницы или когда пользователь нажимает флажок, чтобы добавить его, или кнопку X, которую я придумал, чтобы удалить его. Первый блок кода представляет собой снимок части тела страницы. Второй — это js-файл. Проблема, которую я вижу, заключается в том, что флажок уже установлен, и я устанавливаю второй флажок. Кажется, он добавляет неправильный элемент p, хотя, когда я снимаю некоторые флажки, он разбирается сам. Будем благодарны за любую помощь с этой странностью!
Report Server Dashboard




My last 30 days of reports

[url=mailto:IT@midatlanticcrane.com?subject=Report%20Server%20report%20or%20customization%20request]***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***[/url]






MY FAVORITES - This section contains reports where you've checked the "Add to MY FAVORITES" checkbox.


INFO REPORTS - General information reports that don't fall under another specific category

CUSTOMER LIST
- 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.
CUSTOMERS
- 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.


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 = $('X');
$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);
});
}

});


Подробнее здесь: https://stackoverflow.com/questions/791 ... s-expected