Проблема в том, что у вас есть дубликаты идентификаторов для кнопок открытия. Дублирующиеся идентификаторы не являются действительным HTML, и это именно то, почему. Они могут вызвать нежелательное поведение.
const modalBtn = document.getElementsByID("modalBtn");
выберет только первое вхождение элемента с этим идентификатором. Так что просто первая кнопка.
Вы должны добавить разные идентификаторы и общий класс к кнопкам. Я добавил modal-btn класс к каждой кнопке, которая откроет модальный. Так что он выберет все эти кнопки.
Также HTML-атрибуты должны быть не camelCase, а тире, например this-class
// Get modal element
const modal = document.getElementsByClassName("modal");
// Get open modal button
const modalBtn = document.getElementsByClassName("modal-btn");
// Get close btn
const closeBtn = document.getElementsByClassName("closeBtn");
// listen for open click
for (var i = 0; i < modalBtn.length; i++) {
(function() {
var j = i;
modalBtn[j].addEventListener("click", function() {
openModal(j)
});
})();
}
// Listen for close click
for (var i = 0; i < closeBtn.length; i++) {
(function() {
var j = i;
closeBtn[j].addEventListener("click", function() {
closeModal(j)
});
})();
}
// function to open modal
function openModal(j) {
modal[j].style.display = "block";
}
// Function to close block
function closeModal(j) {
modal[j].style.display = "none";
}
#blog {
background: #fff;
}
.blog-posts {
display: flex;
justify-content: center;
}
.blog-content {
background: #f4f4f4;
margin: 3rem;
border-bottom-right-radius: 15px;
}
img {
border-top-left-radius: 15px;
}
h6 {
padding-top: 0.2rem;
}
h3 {
padding-top: 1rem;
font-size: 1.5rem;
color: #333;
}
.btn-light {
padding: 0.5rem 1rem;
margin: 2rem;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
}
.modal-content {
background: #f4f4f4;
margin: auto;
overflow: scroll;
padding: 20px;
width: 100%;
height: 100%;
animation: modalOpen 1.5s;
}
.closeBtn {
color: $dark-color;
float: right;
margin: 1rem 0.5rem;
font-size: 50px;
}
<section id="blog" class="text-center py-1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="blog-posts">
<div class="blog-content">
<img src="./img/blog.jpg" alt="blog" />
<h6>APRIL 2019</h6>
<h3>How we can help you</h3>
<button id="modalBtn" class="btn-light modal-btn">READ MORE</button>
</div>
<div class="blog-content">
<img src="./img/blog.jpg" alt="blog" />
<h6>APRIL 2019</h6>
<h3>How we can help you</h3>
<button id="modalBtn2" class="btn-light modal-btn">READ MORE</button>
</div>
<div class="blog-content">
<img src="./img/blog.jpg" alt="blog" />
<h6>APRIL 2019</h6>
<h3>How we can help you</h3>
<button id="modalBtn3" class="btn-light modal-btn">READ MORE</button>
</div>
<div id="simpleModal" class="modal">
<div class="modal-content">
a
<span class="closeBtn"><i class="fas fa-times-circle"></i></span>
</div>
</div>
<div id="simpleModal2" class="modal">
<div class="modal-content">
b
<span class="closeBtn"><i class="fas fa-times-circle"></i></span>
</div>
</div>
<div id="simpleModal3" class="modal">
<div class="modal-content">
c
<span class="closeBtn"><i class="fas fa-times-circle"></i></span>
</div>
</div>
</div>
</section>