Both images don’t work because you are using ID and onclick function is targeting only one element. I recommend using class, so it can be used on more than one element. Please change your javascript to the below:

var modal = document.getElementById("myModal");
var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


for ( var e in img ) {
  img[e].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
  }
}


var exit = document.getElementsByClassName("close")[0];

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

And this to HTML:

<div id="kw1cpraktijk">
    <img class="myImg" src="../assets/kw1cpraktijk.PNG">
    <h2>Praktijkopdracht P2</h2>
    <p>dit is wat tekst</p>
</div>
<div id="willem2praktijk">
    <img class="myImg" src="../assets/willem2praktijk.PNG">
    <h2>Project P1</h2>
    <p>dit is wat tekst</p>
</div>
<div id="myModal" class="modal">
    <span class="close"> &times;</span>
    <img class="modal-content" id="img">
</div>

this should work fine !!

So you code work fine only for the first image, you have a tiny problem in your js, you didn’t write the code for the second image in js.

i didn’t change your code (Id and className), but i only added some lines to fixe your problem.

i have to tell you, working with id can sometime generation some problems and its always better to overwrite a html than display a hidden div

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var img2 = document.getElementById("myImg1");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
img2.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}

var exit = document.getElementsByClassName("close")[0];

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

I am currently making a modal for a school project but i can’t figure out why it doesn’t work.

html

 <div id="kw1cpraktijk">
        <img id="myImg" src="../assets/kw1cpraktijk.PNG">
        <h2>Praktijkopdracht P2</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="willem2praktijk">
        <img id="myImg1" src="../assets/willem2praktijk.PNG">
        <h2>Project P1</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="myModal" class="modal">
        <span class="close"> &times;</span>
        <img class="modal-content" id="img">
    </div>
css
    
#myImg

{
    
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%; 
    max-width:450px;
}




 .modal
    {
        display: none;
        position: fixed;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0, 0.85);
    }
    
    .modal-content
    {
        margin: auto;
        display: block;
        width: 100%;
        max-width: 800px;
        animation-name: zoom;
        animation-duration: 0.6s;
    }
    
    @keyframes zoom
    {
        from {transform:scale(0)}
        to {transform:scale(1);}
    }
    
    .close
    {
        position: absolute;
        color: white;
        font-size: 50px;
        font-weight: bold;
        right: 35px;
        top: 0;
    }
    
    .close:hover
    {
        color: grey;
        cursor: pointer;
        text-decoration: none;
    }

javascript

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");


img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
}

var exit = document.getElementsByClassName("close")[0];

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

It only works on the first image. What should i change? I think it has something to do with the javascript because it only runs once. I hope someone could help me out.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim egestas lacus sit amet varius. Sed nec massa consectetur, posuere ex eget, convallis dui. Praesent aliquam leo nec metus tristique, vitae eleifend ex finibus. Pellentesque sagittis luctus eros, in placerat mauris efficitur id. Suspendisse ultricies sit amet lectus id rhoncus. Nam ligula quam, vulputate quis lacinia vitae, tempus sit amet risus. Duis lectus lectus, volutpat vitae justo at, pulvinar dignissim est. Nullam dignissim interdum dapibus. Duis commodo euismod lorem a posuere. Aliquam tincidunt iaculis vehicula. Nunc eget vestibulum velit. Vivamus tempor leo eget ex aliquam sollicitudin. Suspendisse sodales vel libero in fermentum.