Show DIV based on form value - php

Question

I have a database driven table where the last column in the table contains a form that repeats for each row. I want to have a day_inperson field show if the value in the spring_2021_status field is equal to "Both" Since the form is repeated on the page, it doesn't work.
Here is my code for the repeating form. The form itself works fine and inserts into the database. Just need the one field to show if it meets the value of "Both":
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" id="spring_2021_status" name="spring_2021_status">
<option></option>
<option value="In Person" <?php if (!(strcmp('In Person', ($survey->getColumnVal("spring_2021_status"))))) { echo "selected=\"selected\"";} ?>>In Person</option>
<option value="Remote" <?php if (!(strcmp('Remote', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>Remote</option>
<option value="Both" <?php if (!(strcmp('Both', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>Both</option>
<option value="N/A" <?php if (!(strcmp('N/A', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>N/A</option>
</select>
<br>
<script>
$('#spring_2021_status').on('change',function(){
if( $(this).val()==="Both"){
$("#update_status2").show()
}
else{
$("#update_status2").hide()
}
});
</script>
<div class="row" id="update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
<?php echo($survey->getColumnVal("notes")); ?></textarea>
</div>
<input type="hidden" value="<?php echo($survey->getColumnVal("theein")); ?>" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>

Answer 1

You can use class selector inside your div update_status2 then whenever your select-box gets change use $(this).closest('form').find().. this line will get closest form from select-box and then find your div which you need to show/hide.
Demo Code :
//onchange of sleect
$('[name=spring_2021_status]').on('change', function() {
if ($(this).val() === "Both") {
//get closest form tag and then find your div
$(this).closest('form').find(".update_status2").show()
} else {
$(this).closest('form').find(".update_status2").hide()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" name="spring_2021_status">
<option></option>
<option value="In Person" selected>In Person</option>
<option value="Remote">Remote</option>
<option value="Both">Both</option>
<option value="N/A">N/A</option>
</select>
<br>
<!--added class-->
<div class="row update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
something...</textarea>
</div>
<input type="hidden" value="abc" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" name="spring_2021_status">
<option></option>
<option value="In Person" selected>In Person</option>
<option value="Remote">Remote</option>
<option value="Both">Both</option>
<option value="N/A">N/A</option>
</select>
<br>
<div class="row update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
something...</textarea>
</div>
<input type="hidden" value="abc" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>