Jquery selector for thymeleaf - html

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);
});