Merhabalar bir modal kodum var ve bunu dinamik hale getirmek istiyorum

<div id="myModal" class="modal">
Kodlar
</div>

    // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];


// When the user clicks on the button, open the modal


$( "#myBtn" ).click(function() {
  $( "#myModal" ).show( "slow", function() {
    // Animation complete.
  });
});
    
// When the user clicks on <span> (x), close the modal

$( ".close" ).click(function() {
  $( "#myModal" ).hide( "slow", function() {
    // Animation complete.
  });
});
    
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

İstediğim şey bunu dinamik hale getirmek suanda yeni bir modal eklemek istesem bu kodları kopyalayıp bir tane daha eklemem gerek. Ancak tam olarak istediğim JS kodları sabit kalacak ama modal kısmındaki ID değeri değişecek ya da nasıl yapabilirseniz öyle olcak. html "ID" değerine ne yazarsam o modali açacak ama tek JS ile