How to get selected radio button value for multiple instances of radio button

Question

I'm trying get the value of selected radio button using the selector $("input[name='job-destination[0]']") and $("input[name='job-destination[1]']") . However when I select the radio button in $("input[name='job-destination[1]']") it outputs the value from $("input[name='job-destination[0]']")

<div class="form-group">
    <p>Destination</p>

    <div class="radio-btn-grp">
        <input class="job-destination" name="job-destination[0]" value="Australia" type="radio" required>
        <label for="job-destination">Australia</label>
    </div>
    <div class="radio-btn-grp">
        <input class="job-destination" name="job-destination[0]" value="Canada" type="radio">
        <label for="job-destination">Canada</label>
    </div>
</div>

<div class="form-group">
        <p>Destination</p>

        <div class="radio-btn-grp">
            <input class="job-destination" name="job-destination[1]" value="Australia" type="radio" required>
            <label for="job-destination">Australia</label>
        </div>
        <div class="radio-btn-grp">
            <input class="job-destination" name="job-destination[1]" value="Canada" type="radio">
            <label for="job-destination">Canada</label>
        </div>
    </div>

Answer 1

Seems that your values of $("input[name='job-destination[0]']") and $("input[name='job-destination[1]']") are equal. For the test purposes try to change the values. BTW, you can get HTML element, value of which you see, just type console.log($("input[name='job-destination[0]']")) , for example

Answer 2

When you use $("input[name='job-destination[0]']").val() it will always return the value of first element irrespective of whether it is selected or not.

You need to use :checked Selector , along with .val() to get its value.

Matches all elements that are checked or selected.

$("input[name='job-destination[0]']:checked").val()