Javascript modal for images not loading images once clicked on

Question

I have been following this post to allow multiple images to use a modal to display them once clicked on. I am using bootstrap primarily to design the page so I tried to change the names of them to not mix up with the already made bootstrap modal classes. However when being clicked on still is not working.

I am also not using jQuery but if it would help just let me know.

// create references to the section
var howItWorks = document.getElementById('howitworks');
// create references to the modal...
var modal = howItWorks.getElementById('myModal');
// to all images -- note I'm using a class!
var images = howItWorks.getElementsByClassName('mImgs');
// the image in the modal
var modalImg = document.getElementById("img01");


// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
  var img = images[i];
  // and attach our click listener for this image.
  img.onclick = function(evt) {
    modal.style.display = "block";
    modalImg.src = this.src;
  }
}

var span = document.getElementsByClassName("closeit")[0];

span.onclick = function() {
  modal.style.display = "none";
}

/* Style the Image Used to Trigger the Modal */
.mImgs:hover {
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}

/* The Modal (background) */
.js-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.js-modal-content {
  margin: auto;
  display: block;
  /* width: 80%;
  max-width: 700px; */
  width: auto;
  max-height: 100vh;
  max-width: 100%;
}


/* Add Animation - Zoom in the Modal */
.js-modal-content {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.closeit {
  position: absolute;
  float: right;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closeit:hover,
.closeit:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* Market Solutions all Images
____________________________________________*/
.mImgs {
height: 30%;
width: 30%;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s;
}

       <div id="howitworks">
          <h2>How It Works</h2>
          <p>
            Our custom designed marketplace solution provides the following customer experience:
          </p>

          <p>1) Customer searches for parts.</p>
          <img src="images/marketplace-solutions/HowItWorks_1.jpeg" class="img-fluid mImgs pt-1">

          <img src="images/marketplace-solutions/HowItWorks_2.jpeg" class="img-fluid mImgs pt-1">


          <br>
          <p class="pt-5">2) Customer select items to be included in quote.</p>
          <!-- 1 photo goes here -->
          <img src="images/marketplace-solutions/HowItWorks_3.jpeg" class="img-fluid mImgs pt-1">
          <br>

          <p class="pt-5">3) Customer selects shipping options.</p>
          <img src="images/marketplace-solutions/HowItWorks_4.jpeg" class="img-fluid mImgs pt-1">
          <br>

          <p class="pt-5">4) Customer requests a quote.</p>
          <!-- 1 photo goes here -->
          <img src="images/marketplace-solutions/HowItWorks_5.jpeg" class="img-fluid mImgs pt-1">
          <br>

          <p class="pt-5">5) Seller responds to quote with confirmed prices and shipping costs of order.</p>
          <!-- 1 photo goes here -->
          <img src="images/marketplace-solutions/HowItWorks_6.jpeg" class="img-fluid mImgs pt-1">
          <br>

          <p class="pt-5">6a) Customer pays for order.</p>
          <br>

          <p class="pt-5">6b) Seller updates order as paid.</p>
          <!-- 1 photo goes here -->
          <img src="images/marketplace-solutions/HowItWorks_7.jpeg" class="img-fluid mImgs pt-1">
          <br>

          <p class="pt-5">7) Seller updates customer with shipping details including tracking numbers.</p>
          <!-- 1 photo goes here -->
          <img src="images/marketplace-solutions/HowItWorks_8.jpeg" class="img-fluid mImgs pt-1">
          <br>


          <!-- The Modal -->
          <div id="myModal" class="js-modal">

            <!-- The Close Button -->
            <span class="closeit">&times;</span>

            <!-- Modal Content (The Image) -->
            <img class="js-modal-content" id="img01">
          </div>

        </div> <!-- END OF HOW IT WORKS -->