Problem with several modal windows in one page with random sentence generator (expand snippet to see)

I am really stuck with this, I kind of know what is the problem but still I can't find the way to fix it. I am making a single page website with modal windows from images and the problem is that I can't get to make the sentence random generator with the other elements, it is supposed to be more sentences for each horoscope, it works only with the first one. I wanted to create a loop with event listeners that would refer to the quotes array for each sign. But I don't know where to start.

Thank you in advance!

var modal = document.getElementById("myModal");
var arr = ["myImg0", "myImg1", "myImg2"];
for (var i = 0; i < arr.length; i++) {
  var img = document.getElementById(arr[i]);
  var modalImg = document.getElementById("modal01");
  img.onclick = function () {
    modal.style.display = "block";
    modalImg.src = "this.src";
  };
}
var span = document.getElementsByClassName("close")[0];

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

var quotes = [
  'If you want to know the truth about something, there is a very good chance that Aries will give it to you straight.',
  'You can definitely count on an Aries when the chips are down.',
  'If you want to spark an Aries passion take their face in your hands, look them in the eye and passionately kiss them.',
  'Aries is not about hanging in until the finish, or about being nice, they are born to initiate and inspire, and then to initiate and inspire again, and again.',
  'Aries is born to make their mark on the world and take the road less traveled.',
  'Aries are their own heroes and are true to themselves.',
  'Aries is fully committed to what they believed in.',
  'Aries is resilient, guileless and optimistic.',
  'Failure is not an option for an Aries, it is a prerequisite for success.'
  ];
  var quotes1 = [
      'Is this working?',
      'please'
      ];
  
  function newQuote() {
      var randomNumber = Math.floor(Math.random() * (quotes.length));
      document.getElementById('quoteDisplay').innerHTML = quotes [randomNumber];
  }
  window.addEventListener('load', newQuote, true);

    

body {
  font-family: 'Quicksand', sans-serif;
    max-width: 1200px;
    margin: 0px auto;  
}
header {
    margin: 70px;
}
h1 {
    text-transform: uppercase;
    background-image: -webkit-gradient(linear,0% 0%,75% 100%,from(#fc6),to(#f69));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Quicksand', sans-serif;
    font-size: 60px;
    text-align: center;
}
h2 {
  font-family: 'Quicksand', sans-serif;
}
p {
  font-family: 'Merriweather', serif;
}
img {
    max-width: 80%;
}

img:hover,
img:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-1.00em);
}

.flex-container {
    flex-direction:row;
    display: -webkit-flex;
    display: flex;
    align-content: center;
  }
  
  .flex-item {
    width: 50%;
    margin: 25px 0px;
    order: 1;  
    text-align: center;
  }

  .btn{
    position:relative;
    font-size:1.2em;
    font-weight:300;
    color:#fff;
    text-shadow:none;
    border-radius:0px;
    background: #f7be68;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.22);
    text-decoration: none;
 }
 
 .btn:hover{
    background: #f5b14b;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.22);
    color:#fff;
 }

 
#quoteDisplay {
  padding-bottom: 10px;
  text-align: left;
  font-size: 50px;
  line-height: 58px;
  background-image: -webkit-gradient(linear,0% 0%,75% 100%,from(#fc6),to(#f69));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


button {
  box-shadow:inset 0px 1px 0px 0px #efdcfb;
    background:linear-gradient(to bottom, #dfbdfa 5%, #e87f9d 100%);
    background-color:#dfbdfa;
    border-radius:6px;
    border:1px solid #f2e385;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family: 'Quicksand';
    font-size:15px;
    padding:10px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #cc8c54;
}


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1;
  padding-top: 175px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.5); 
}

.modal-content {
  padding: 15px 15px 24px 20px;
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  background-color: white;
  border-radius: 15px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 900px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

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

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


.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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


@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

   <main>
      <body>
        <div class="flex-container">
          <div class="flex-item">
            <img id="myImg0" src="IMG/Grupo 9@2x.png" alt="aries"/>
            <div id="myModal" class="modal">
              <span class="close">&times;</span>
              <div class="modal-content" id="modal01">
                <div id="quoteDisplay" name= "aries"></div>
                <button onClick="newQuote()">New Quote</button>
              </div>
            </div>
          </div>
          <div class="flex-item">
            <img id="myImg1" src="IMG/Grupo 10@2x.png" alt="taurus"/>
          </div>
          <div class="flex-item">
            <img id="myImg2" src="IMG/Grupo 11@2x.png" alt="gemini"/>
          </div>
        </div>
        <div class="flex-container">
          <div class="flex-item">
            <img src="IMG/Grupo 12@2x.png" alt="cancer" />
          </div>
          <div class="flex-item">
            <img src="IMG/Grupo 19@2x.png" alt="leo" />
          </div>
          <div class="flex-item">
            <img src="IMG/Grupo 20@2x.png" alt="virgo" />
          </div>
        </div>
        <div class="flex-container">
          <div class="flex-item">
            <img src="IMG/Grupo 13@2x.png" alt="libra" />
          </div>
          <div class="flex-item">
            <img src="IMG/Grupo 18@2x.png" alt="scorpio" />
          </div>
          <div class="flex-item">
            <img src="IMG/Grupo 17@2x.png" alt="sagittarius" />
          </div>
        </div>
        <div class="flex-container">
          <div class="flex-item">
            <img src="IMG/Grupo 14@2x.png" alt="capricorn" />
          </div>
          <div class="flex-item">
            <img src="IMG/Grupo 15@2x.png" alt="aquarius" />
          </div>
          <div class="flex-item">
            <img src="IMG/Grupo 16@2x.png" alt="pisces" />
          </div>
        </div>
      </body>
    </main>