I have a form in which I am using 2 rows that have same column names as shown in picture below:

In the above form when I select the options from both drop downs, if the selections have same value the field of call quality should show good and on different selection bad should appear. I have tried with the following code:
function checkSelection(val) {
let agentSelection = $(".agent_selection").val();
let correctSelection = $(".correct_selection").val();
if (agentSelection == correctSelection) {
$(".call_quality").val('Good');
} else {
$(".call_quality").val('Bad');
}
}
But it makes all the fields upon above mentioned criteria either good or bad based on the selection of first field. My form code is:
<div class="col-md-3">
<div class="form-group">
<label for="">Call ID</label>
<input type="text" class="form-control call_id" name="call_id[]" required>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Agent Selection</label>
<select name="agent_selection[]" class="form-control agent_selection" onchange="checkSelection(event)">
<option value="">Select an Option</option>
@foreach ($options as $option)
<option value="{{ $option->id }}">{{ $option->questions ?? '' }}
</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Correct Selection</label>
<select name="correct_selection[]" class="form-control correct_selection" onchange="checkSelection(event)">
<option value="">Select an Option</option>
@foreach ($options as $option)
<option value="{{ $option->id }}">{{ $option->questions ?? '' }}
</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Call Quality</label>
<input type="text" class="form-control call_quality" name="call_quality[]">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Call ID</label>
<input type="text" class="form-control call_id" name="call_id[]" required>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Agent Selection</label>
<select name="agent_selection[]" class="form-control agent_selection" onchange="checkSelection(event)">
<option value="">Select an Option</option>
@foreach ($options as $option)
<option value="{{ $option->id }}">{{ $option->questions ?? '' }}
</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Correct Selection</label>
<select name="correct_selection[]" class="form-control correct_selection" onchange="checkSelection(event)">
<option value="">Select an Option</option>
@foreach ($options as $option)
<option value="{{ $option->id }}">{{ $option->questions ?? '' }}
</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Call Quality</label>
<input type="text" class="form-control call_quality" name="call_quality[]">
</div>
</div>
I want an assistance on how to fix the issue that when I make selection of dropdown in any row the value should be change accordingly.