How to validate multiple dropDownList?

Question

css

Good afternoon.
There are three forms on the site page, each of which has two dropDownLIsts for selecting cities.
All forms for one model.

$form = ActiveForm::begin([
    'id' => 'calcTopForm',
    'enableAjaxValidation' => true,
]);
/***************/
$form->field($model, 'from')->dropDownList(RoutesCities::getAutocompleteList(),[
            'prompt'=> 'Выбрать...',
        ])->label(false)
/*************/
$form->field($model, 'to')->dropDownList(RoutesCities::getAutocompleteList(),[
            'prompt'=> 'Выбрать...',
        ])->label(false)

The first and last are connected on the page via$this->render()

<?= $this->render('includes/calc-form', ['model' => $model]) ?>

The middle form is inscribed right on the page.
Normal validation works without problems. But I need to enable ajax validation.
Here I have a problem.
Ajax validation doesn't want to work correctly for dropdowns. The list IDs of course match, and this does not allow ajax validation to work normally. An attempt to change the id using jquery did not work, the validation refuses to work at all.
How to correctly enable ajax validation for these lists if the id of the lists are the same?
ps
And one more small question.
Why does the side scroll of the browser disappear after a server response is received via ajax? After restarting the browser, the scroll is restored.

Answer 1

Dmitry ,
work with always open developer tools and a check mark

Answer 2

Make a codepen and what styles do not work, what is at the bottom itself?

Answer 3

The solution turned out to be very simple.
Lost sight of what can be passed as the id parameter of the form. Now, when connecting the form in different parts of the file, I pass the form id as a parameter and the validation works on all lists.
and in the form itself I specify this id

$form = ActiveForm::begin([
    'id' => $idForm,
    'enableAjaxValidation' => true,
]);

Everything, ajax validation works on all lists, in all forms on the page.