Change the value of field based on selections of dropdown with same classnames in JavaScript

Viewed 27

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.

0 Answers
Related