مشكلة تضارب اكواد بين css و java script

إذا كان هذا السؤال خاصة بأحد دروس الأكاديمية،  ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم الأسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل.

ولكن سأحاول توضيح ل المشكلة لك أو بسبب  أن العنصر filter-options تأخذ الخاصية position:absolute فإنها لا تعمل مع ال z-index لذلك لحل المشكلة احذف ال z-index للعنصر .add-to-fav

وبالنسبة للمشكلة الثانية فهي سلوك طبيعي للكود الموجود حيث أن الكود التالي 

filterContent.addEventListener('click', function (event) {
      const filterGroup = event.target.closest('.filter-group');
      if (filterGroup) {
        filterGroup.remove();
        const filterTab = Array.from(filterTabs).find(tab => tab.dataset.target === filterGroup.id.replace('active-', ''));
        if (filterTab) {
          filterTab.classList.remove('selected');
        }
      }
    });

مسؤل عن حذف ال filterGroup عن الضغط عليها ولكن حاول التعديل على هذا الكود ليجعل حذف ال filterGroup عند تغيير قيمة ال select مثلاً كالتالي

filterContent.addEventListener('change', function (event) {
  // التحقق من أن العنصر الذي تم التفاعل معه هو select
  if (event.target.matches('select')) {
    const filterGroup = event.target.closest('.filter-group');
    if (filterGroup) {
      filterGroup.remove();
      // العثور على التبويب المرتبط بمجموعة الفلترة هذه
      const filterTab = Array.from(filterTabs).find(tab => tab.dataset.target === filterGroup.id.replace('active-', ''));
      if (filterTab) {
        filterTab.classList.remove('selected');
      }
    }
  }
});