How to associate the same function in javascript to multilpy button of a <c: forEach>?

I have a problem with opening modal when the 'Modifica' button is clicked. Only the first button works and I understand that I don't have to assign an id to the button. How can I open the modal (which is different for each button present) by clicking on each button?

here is the code in the jsp:

    <c:forEach items="${vettoredilavorazioni}" var="lavori">
<tr>
    <td>
        <c:out value="${lavori.nomelavorazione}" ></c:out><br>
    </td>
    <td><a target="_blank" href="<c:out value="${lavori.picturepath}"/>">
            <img class="imgg" height="400px" width="600px" src="<c:out value="${lavori.picturepath}"/>"/>
        </a>
    </td>
    <td>  
        <c:out value="${lavori.descrizione}" ></c:out><br>
        <c:forEach items="${Category}" var="category">      
            <c:if test="${lavori.categoria==category.id}">
                <c:out value="${category.name}" ></c:out><br>
            </c:if> 
        </c:forEach>    
    </td> 
</tr>
<input type="hidden" name="codiceprodotto" value="${lavori.id}">
<button class="w3-button" id="myBtn" >Modifica</button><br> 



<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Modifica il prodotto</h2>
        </div>
        <div class="modal-body">  
            <form  name="fileupload" action="Modificaprodotto" method="post" enctype="multipart/form-data" >
                Name:<input id="insname" type="text" name="nome" onchange="preview_nome(event)"  value="${lavori.nomelavorazione}"/><br/>
                Categoria:<select name="category" id="inscategoria"  onchange="preview_categoria(event)">
                    <c:forEach items="${Category}" var="category">   
                        <c:if test="${lavori.categoria==category.id}">
                            <option selected value=""><c:out value="${category.name}"/>
                            </option>
                        </c:if>
                    </c:forEach>
                    <c:forEach items="${Category}" var="c">
                        <option value="${c.id}">${c.name}</option>
                    </c:forEach>
                </select><br>
                Descrizione:<input id="insdescrizione" type="text" name="descrizione" onchange="preview_descrizione(event)" value="${lavori.descrizione}"/><br/>
                Immagine:<input id="upfile" type="file" name="immagine" onchange="preview_image(event)"><br/>
                <div class="w3-container" style="width:500px;height:500px">
                    <div class="w3-container w3-border w3-large">
                        <img id="output_image" src="picture/nopreview.png"> 
                        <h2 id="output_nome"></h2>  
                        <p id="output_descrizione"></p> 
                        <p id="output_categoria"></p>   
                    </div>
                </div>
                <button>Salva modifica</button>
            </form>
        </div>
    </div>
</div>
    </c:forEach>

here is the code in the jsp:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

Solution

With this outer loop you are potentially producing invalid HTML code, (multiple elements with the same HTML-ID). See here How does jQuery work when there are multiple elements with the same ID value?

So all your IDs in the snipped provided could occur multiple times

id="myBtn"
id="myModal"
id="insname"
id="inscategoria"
id="insdescrizione"
id="upfile"
id="output_image"
id="output_nome"
id="output_descrizione"
id="output_categoria"

Javascript can have huge problems selecting those elements. Browsers will warn you about that in the console. It's better to use dedicated classes like class="js-mycomponent" for selecting or something else which does not invalidate your Markup.