Jquery selector for thymeleaf

Question

how can i get value from the hidden field inside the div below:

<div class="col-lg-6" th:each="devicedit : ${eachdevicedetails}">
  <div class="courses-container">
    <div class="course">
      <div
        class="course-preview"
        th:style="${devicedit.color} == 'Green' ? 'background: #03CB61' : 'background: #F22A54'"
      >
        <input type="hidden" name="hiddenDiviceId" th:value="${devicedit.id}" />
        <h6 th:text="${devicedit.area}"></h6>
        <h2 th:text="${devicedit.country}"></h2>
        <br /><br />
        <h6 th:text="${devicedit.state}"></h6>
      </div>
      <div class="course-info">
        <div class="progress-container">
          Status :
          <span
            class="badge badge-pill badge-success"
            th:style="${devicedit.color} == 'Green' ? 'background: #03CB61' : 'background: #F22A54'"
            th:text="${devicedit.color} == 'Green' ? 'Active' : 'Inactive'"
          ></span>
        </div>
        LastUpdate :
        <h6 th:text="${devicedit.lastupdatedon}"></h6>
        <h2 th:text="${devicedit.device_Name}"></h2>
        <br />
        <button
          onclick="openModal(this)"
          id="pickerMaster"
          class="btn btn-primary"
        >
          Detail View
        </button>
      </div>
    </div>
  </div>
</div>

and I used the below jquery code to get value, but i can only pick value of 1st div:

$("#pickerMaster").click(function () {
  var divid = $(this)
    .closest("div.course")
    .find("input[name='hiddenDiviceId']")
    .val();
  console.log(divid);
});

Answer 1

for this you should set class for button and use this for get input value:

<button onclick="openModal(this)" class="btn btn-primary pickerMaster">Detail View</button>

and:

$(".pickerMaster").click(function() {
var divid = $(this).closest("div.course").find("input[name='hiddenDiviceId']").val();
console.log(divid);
});