JS'de eventlistener ile tetiklenen obje çağrılamıyor

Proje: https://codepen.io/dogukanhanifi/pen/MWVEvjb







Sorun tetiklediğim fill objesini çekememek. Eğer foreach ile oluşturup. Dragdrop'ı içine atınca tüm Fill'leri seçiyor. Kod kaç tane fill varsa o kadar çalışıyor.

2 adet queryselectorall olan tüm projelerde böyle donup kalıyorum. Birinde kullandığını diğerinde kullanamıyorum. Ortak kesişim noktası nasıl oluşturabilirim?

Daha açıklayıcı olmam gerekirse son fotoğrafta ki fill tanımsız.

Sen querySelectorAll() ile dom'daki .fill ismindeki bütün childları çekiyorsun.
Tek tek çekme yapmak için her birine unique id tanımlaman lazım.

Ondan sonrasında
document.querySelector(".fill_1")
document.querySelector(".fill_2")
document.querySelector(".fill_3")

gibi istediğin element ile etkileşime geçebilirsin.