How to pass dropdown values as hidden using jQuery?

Question

The scenario is like I am fetching data from database and populating it as a Table, which is fine and it is getting populated properly. The second thing is that I have an Add button in every row and when user clicks on that button the hidden input values should pass to js function.

All values are getting passed properly but the value of dropdown field (select) sends the value of first row and changes to the dropdown is working only for first row and other rows dropdown values are just blank.

I think this is due to the id which is defined as hidden_spec for all the rows and it is not unique.

I tried dynamic name such as concatenating id with some values like courseId from db but it shows different error like Uncaught TypeError: Cannot set properties of null (setting 'value') at HTMLSelectElement.onchange ((index):1:50)

Following is the Html code:

<form action="helper/addTOPlan.php" method="POST">
    <tr id="<?php echo $course->id; ?>">
        <td class="p-4">
            <div class="media align-items-center">
                <img src="<?php echo get_template_directory_uri() . $course->image ?>" class="d-block ui-w-40 ui-bordered mr-4" alt="">
                <div class="media-body">
                    <a href="#" class="d-block text-dark"><?php echo $course->name; ?></a>
                    <small>
                        <span class="text-muted"><?php echo  $course->credit_points; ?> CP</span> &nbsp;
                        <span class="text-muted"> <?php echo  $dbUtil->getSemester($course->semester_id)[0]->name; ?></span>&nbsp;
                        <span class="text-muted"><a href="<?php echo  $course->modhb_link; ?>" class="card-link">Go to Module Handbook</a></span>
                    </small>
                </div>
            </div>
        </td>
        <td class="text-right font-weight-semibold align-middle p-4">
            <div class="dropdown">
                <select name="specialization" id="specialization" onchange="document.getElementById('hidden_spec').value=this.value">>
                    <option value="0">Select</option>
                    <option value="spec1">Specialization 1</option>
                    <option value="spec2">Specialization 2</option>
                    <option value="supp">Supplementary Section</option>
                </select>
            </div>
        </td>
        <td class="align-middle p-4"><input type="text" class="form-control text-center semester" name="semester" id="semester" value="23">
            <!-- <td class="text-center align-middle px-0"><a href="#" onclick="toggleNav()" id="addCourse">Add</a></td> -->
            <input class="course-name" type="hidden" name="hidden_course_name" id="hidden_course_name" value="<?php echo $course->name; ?>" />
            <input class="course-cp" type="hidden" name="hidden_course_CP" id="hidden_course_CP" value="<?php echo $course->credit_points; ?>" />
            <input class="course-offerin" type="hidden" name="hidden_course_offerredIn" id="hidden_course_offerredIn" value="<?php echo $dbUtil->getSemester($course->semester_id)[0]->name; ?>" />
            <input class="specialization" type="hidden" name="hidden_specialization" id="hidden_spec" value="" />
        </td>
        <td class="align-middle p-4"><button type="submit" class="<?php echo $course->id; ?>"onclick=addToPlan(this.id) id="<?php echo $course->id; ?>">
                Add
            </button>
        </td>
    </tr>
</form>

Following is the js function:

function addToPlan(id) {
  var $semester = $("." + id).closest("td").siblings("td").find("." + newCourse.semester).val();
  var $courseName = $("." + id).closest("td").siblings("td").find("." + newCourse.courseName).val();
  var $courseCP = $("." + id).closest("td").siblings("td").find("." + newCourse.creditPoint).val();
  var $courseOfferIn = $("." + id).closest("td").siblings("td").find("." + newCourse.courseOfferIn).val();
  var $specialization = $("." + id).closest("td").siblings("td").find("." + newCourse.specialization).val();

  console.log("semester : " + JSON.stringify($semester));
  console.log("courseName : " + JSON.stringify($courseName));
  console.log("courseCP : " + JSON.stringify($courseCP));
  console.log("courseOfferIn : " + JSON.stringify($courseOfferIn));
  console.log("specialization: " + JSON.stringify($specialization));
}

Following is the output for the first row (correct):

semester : "23"
courseName : "Collaborative \nIntelligence"
courseCP : "4"
courseOfferIn : "Summer"
specialization: "spec1"

Following is the output for other rows:

semester : "12"
courseName : "3D Computer \nVision"
courseCP : "4"
courseOfferIn : "Summer"
specialization: ""

Every data is being passed correctly except the specialization which is just empty for other rows except the first row.

Could somebody please help me in explaining how could I achieve this?

Answer 1

The ID hidden_spec is not unique, you can't use that to update the hidden input.

Use the class instead, along with DOM navigation relative to the element being changed

onchange="this.closest('tr').querySelector('specialization').value = this.value"