Changing li class with span id in Modal pop up

[cthornval]

In my html page, I have an external javascript code, that causes a modal to pop up when a project in my html class is clicked. the projects are specified through the li class attribute. I now wish to chance this, so the modal instead pops up when a span id element is clicked. Therfor I have revisited by Javascript code, and changed the li class-attribute (in this case .Project) into the span id attribute (#PopUp). Unfortunately I have not been able to make my code work, through that. Is anyone able to see where I go wrong?

window.onload = function() {
  span = document.querySelectorAll("#PopUp");
  document.querySelectorAll("#PopUp").forEach(LIelm => {
    LIelm.addEventListener('click', showHideModal)
  })
};

function showHideModal(e) {
  if (!e.target.parentNode.matches('#PopUp , .modal-content')) return

  e.preventDefault();
  let currentParent = e.target.parentNode;

  if (currentParent.matches('#PopUp')) {
    document.getElementById(currentParent.dataset.modal).style.display = "block";
  } else {
    currentParent.parentNode.style.display = "";
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
<div id="contact">
   <a href="">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: [e-mail] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
   <br>
   <br>
</div>
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
   <span id="myBtn_1">Irma Type</span>
   <span id="year">2019</span>
   <div class="Describtion">
      <span id="PopUp">Images</id>
      <p style="display:none;">Typedesign<br></p>
   </div>
   <div id="myModal_1" class="modal">
      <div class="modal-content">
         <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- The slideshow -->
            <div class="carousel-inner">
               <div class="carousel-item active">    
                  <img src="Images/Lirma/type.jpg" alt="img" width="100%">
               </div>
               <!-- Left and right controls -->
               <a class="carousel-control-prev" href="#demo" data-slide="prev">
               <span class="carousel-control-prev-icon"></span>
               </a>
               <a class="carousel-control-next" href="#demo" data-slide="next">
               <span class="carousel-control-next-icon"></span>
               </a>
            </div>
            <p>Some text in the Modal...</p>
         </div>
      </div>
   </div>
</li>