Birden fazla butondan birine tıklandığında gözüken div

Kısacası listelenen ürünlerin her birinin altında silme butonu var ve butona tıklandığında popup gibi açılan bir silmek istediğinize emin misiniz yazan div var, fakat bunu id ile tek bir butonda yapınca sorunsuz çalışıyor. Grup olarak yaptığımda ise sadece 1. buton çalışıyor diğerleri çalışmıyor bunu nasıl çözebilirim veya başka nasıl yapabilirim? Şimdiden teşekkürler

Kodlarım ;

<input class="sil myBtn" value="Sil"></input>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span><br>
        <p class="text-gray-700 dark:text-gray-400">Fanta ürününü silmek istediğinize emin misiniz?<br><br>Bu işlem geri alınamaz.</p>
        <a href="sil.php><input class="sil2" value="Yinede Sil"></input></a>
    </div>
</div>

<script>
  // Popup Al
  var modal = document.getElementById('myModal');

// Kipi açan düğmeyi al
var btn = document.getElementsByClassName("myBtn")[0];

// Kipi kapatan <span> öğesini edinin
var span = document.getElementsByClassName("close")[0];

// Kullanıcı düğmeyi tıklattığında
btn.onclick = function() {
    modal.style.display = "block";
}

// Kullanıcı <span> (x) düğmesini tıkladığında, popup
span.onclick = function() {
    modal.style.display = "none";
}

// Kullanıcı modelden başka herhangi bir yeri tıklattıysa, onu kapatın.
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Konuyu yanlış yere açmışsınız. Kodunuzda yanlışlar dolu. O yüzden javascript değil jquery kullanın sizin için daha hayırlı.

Aşağıda jquery ile çalışan halini ekledim.

İnput'da type kullanmazsanız klasik browserlar onu text olarak değiştirir button değil.