HTML : id 와 class 실수

 

여러 모달 창이 같은 값을 가지고 있는 이유는 HTML 코드에서 id를 사용하여 버튼을 선택했기 때문입니다.

id는 문서 내에서 고유해야 하므로,

여러 개의 버튼에 동일한 id를 할당하면 JavaScript가 첫 번째로 일치하는 요소만 선택합니다.

 

대신 class를 사용하여 각 버튼에 고유한 식별자를 부여하고 JavaScript에서 클래스를 기반으로 요소를 찾도록 수정해야 합니다.

 

 

javascriptCopy code
$(document).ready(function() {
    $(".jobButton").on("click", function() { // 클래스로 변경
        var job_id = $(this).data("mid");
        var jManage = { job_id: job_id }; // JSON 데이터

        $.ajax({
            url: "/job/modal",
            type: "POST",
            data: JSON.stringify(jManage),
            dataType: "json",
            contentType: "application/json",
            // ... (나머지 AJAX 코드)
        });
    });
});

 

 

HTML 코드도 아래와 같이 수정하여 버튼에 클래스를 추가합니다.

htmlCopy code
<c:forEach var="jobList" items="${jobList}">
    <tr>
        <c:if test="${jobList.job_status != -1}">
            <td>
                <button type="button" class="jobButton" data-toggle="modal" data-target="#modal-lg"
                        data-mid="${jobList.job_id}" style="border: none; background-color: #fff; padding-left: 0; padding-top: 0; text-decoration: underline;">
                    ${jobList.job_id}
                </button>
            </td>
        </c:if>
    </tr>
</c:forEach>

 

이렇게 하면 각 버튼이 클래스를 공유하면서 고유한 데이터를 전달할 수 있게 됩니다.