제이쿼리 .each 안먹힘

문제 : jsp로 받은 예약 정보에서 예약 취소를 누르면 예약이 취소 되게 함

첫번째 예약은 정상 작동 하는데 두번째 예약부터 버튼이 안먹힌다. 

 

jsp코드

<div class="mt-5 mb-5 ps-3 row row-cols-1">
          <c:forEach items="${showList}" var="show" varStatus="status">
          <div class="card col me-5 pzero" style="width: 400px;">
            <img src=/static/img/${show.thumbnail} class="card-img-top" alt="..."  width="398" height="230">
            <div class="card-body">
              <h5 class="card-title">${show.hotel_title}</h5>
              <p class="card-text text-truncate">${show.hotel_explain}</p>
              <div class="pt-2">
                <p  class="fs-6" style="color: lightgray;">${show.check_in} ~ ${show.check_out}</p>
              </div>
            </div>
            <hr style="margin-bottom: 0px;">
            <div class="card-body ">
            <span hidden="hidden" id="showhotelnum">${show.reserve_num}</span>
              <button class="btnall rounded container-fluid p-3" id="reserve_cancel">예약 취소</button>
            </div>
          </div>

 

 

js 코드

  $("#reserve_cancel").each(function(index, item){
	  item.addEventListener('click', function (event){
		  console.log("index: "+index);
		  if(confirm("예약 취소시 모든 정보는 날라갑니다.")){
			  alert("예약이 취소되었습니다.")
			  const reserve_number2= $(this).parent().find('#showhotelnum').html();
			  const email11=localStorage.getItem("my_email");
			  console.log("예약 번호는?:"+reserve_number2);
			  location.href="deleteReserve.do?reserve_num="+reserve_number2+"&email="+email11;
		  }
	  });
	});

 

 

 

해결 :  예약 취소 태그의 아이디를 클래스로 바꾸고 실행 했는데 된다. 

#reserve_cancel ---> .reserve_cancel