Javascript querySelectorAll не работает на всех объектах django в шаблоне

Я работаю над сайтом аукционов, используя Javascript и Django. Я хочу сделать так, чтобы каждый пользователь имел возможность просматривать товары, в которых он участвовал, будь то продажа, конкуренция по ставкам или выигранные ставки. Поэтому я создал страницу, содержащую три кнопки (выиграл, продал, соревновался). При нажатии на каждую из кнопок, отображаются связанные продукты (изменение отображения при нажатии). До сих пор это работает. Проблема в том, что я хочу, чтобы в каждой карточке товара при наведении курсора мыши показывался определенный div, а при отведении курсора мыши показывался другой div. Я создал функциональность с помощью Javascript (с помощью forEach карточки в запросе, который выбирает все карточки). Проблема в том, что эта функциональность работает на определенных карточках, но при нажатии на кнопки, которые показывают выигранные или конкурсные товары, она не работает на связанных карточках (не работает на всех карточках).

html:

javascript:

document.addEventListener('DOMContentLoaded',function(){

         
         document.querySelectorAll('.card').forEach(card => {
             card.addEventListener('mouseover', function(){
                 document.getElementById(`co${card.id}`).style.display = 'none';
                 document.getElementById(`bu${card.id}`).style.display = 'block';

               })
             card.addEventListener('mouseout', function(){
                 document.getElementById(`co${card.id}`).style.display = 'block';
                 document.getElementById(`bu${card.id}`).style.display = 'none';
         
              
             })
         })  
      
         document.querySelector('#viewbuy').addEventListener('click',function(){
            document.querySelector('#userbidsbuy').style.display ='flex';
            document.querySelector('#viewselluser').style.display='none';
            document.querySelector('#userbidsnow').style.display='none';
        })
     
        document.querySelector('#viewsell').addEventListener('click',function(){
            document.querySelector('#userbidsbuy').style.display ='none';
            document.querySelector('#viewselluser').style.display='flex';
            document.querySelector('#userbidsnow').style.display='none';
        })
     
        document.querySelector('#viewnow').addEventListener('click',function(){
            document.querySelector('#userbidsbuy').style.display ='none';
            document.querySelector('#viewselluser').style.display='none';
            document.querySelector('#userbidsnow').style.display='flex';
        })
        })
        
    
    console.log('wor')

css:

#userbidsnow{
    display: none;

}

#userbidsbuy{
    display: none;
}

, так как я могу решить эту проблему

Я пытался решить эту проблему с помощью слушателя событий загрузки, но не работает

Вернуться на верх