2 column multiple modal images

Hello,

I'm trying to create multiple modal images that are in 2 columns on my webpage. I was using the template from w3 schools, but I can't seem to figure out how to make multiple images modal. I can only get the first one. How would I be able to do this? Here is my script below for my images. I want to be able to click on the image and have a full size image come up.

<div class="row">

  <div class="column"> <a href="images/Worden_Looking_West_a.jpg" target="new"><img src="images/Worden_Looking_West_w.jpg" alt="Worden Looking West Toward Allegany" style="width:100%"></a>

    <div class="w3-container">

        <h5>Worden Looking West Toward Allegany</h5>

    </div>   

  </div>

  <div class="column">

    <img src="images/worden002w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden003w.jpg" alt="Alumni Hall" style="width:100%">

    <div class="w3-container">

        <h5>Alumni Hall </h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden004w.jpg" alt="Shrine of St. Theresa" style="width:100%">

    <div class="w3-container">

        <h5>Shrine of St. Theresa</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden005w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden006w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

</div>