Getting the value of the closest dropdown list

I have 3 radiobuttons that are created from a foreach loop. 2 out of the 3 radiobuttons will have a textbox that is a select2 dropdown. When the user clicks continue I want to get the value from the closest dropdown list (select) to the checked radiobutton. For testing purposes I’m just trying to alert the value. However, when I click Continue Undefined is appearing in the alert. Any help would be appreciated.

foreach (var formEType in Model.FormETypes)
{
    <div class="card mb-3">
        <div class="card-body">
            <div class="form-check d-flex align-items-center">
                @Html.RadioButtonFor(m => m.FormETypeId, formEType.FormETypeId, new { @class = "form-check-input" })
                <label class="form-check-label edit-item">
                    <b>@formEType.Name</b><br />
                    <span class="text-muted">
                        @Html.Raw(formEType.Description)
                    </span>
                </label>
            </div>
        </div>

        @if (formEType.FormETypeId != FormETypeCode.Appointment)
        {
            <div class="form-group col-md-4">
                <label class="font-weight-bold">Officer</label>
                <select name="IndividualId" class="form-control search"></select>
            </div>
        }
    </div>
}
<button class="btn btn-primary" type="button" id="continue">Continue</button>

Javascript:

$('#continue').on('click', function () {
            var checkedRadio = $('input[name=FormETypeId]:checked', '#FormE');

            if (checkedRadio.val() == '@FormETypeCode.Separation' || checkedRadio.val() == '@FormETypeCode.StatusChange') {
                var closestOfficer = checkedRadio.nextAll('input').val();

                alert(closestOfficer);
            }
        });

>Solution :

Try this method:

 var checked = $("input[type='radio']:checked");
 var textbox = checkedRadio.closest("div").next('div').find('select');