Нужно поправить script (jquery)

Есть небольшой скрипт jquery.validate:

$(this).validate({

    ignore: [],

    invalidHandler: function() {

        var validEl = $('#activity_activity_group_id');

        validEl.siblings().find('p').addClass('error');



        validEl.change(function() {

            validEl.siblings().find('p').removeClass('error');

        });

    }

});

он работает.

Принцип работы скрипта: ищем все не заполненные поля формы и подсвечиваем ошибку ( в нашем случае работа с select (а именно с псевдоселект):

пример кода:

<div class="select-wrapper">

  <div class="styled-dropdown">

    <p class="">Choose a Group...</p> //довавление класса error

    <ul class="styled-dropdown-list" style="display: none;">

      <li id="">Choose a Group...</li>

      <li id="34">Daily Work</li>

      <li id="35">Assignments</li>

      <li id="36">Quizzes</li>

   </ul>

  </div>

  <select class="activity-group-dropdown conditional-dropdown " required="required" name="activity[activity_group_id]" id="activity_activity_group_id" style="display: none;" aria-required="true">

   <option value="">Choose a Group...</option>

   <option value="34">Daily Work</option>

   <option value="35">Assignments</option>

   <option value="36">Quizzes</option>

  </select>

</div>



если есть select с классом error то его соседнему элементу styled-dropdown p присваиваем также класс error



Все это сейчас работает в разрезе #activity_activity_group_id

Я же хочу чтобы была возможность применить скрипт к разным select их может и будет несколько,

если просто записать 

var validEl = $('select'); то выдает вообще все select (valid и error) и почему-то при клике по кнопке сначала подсвечивается input а если кликнуть второй раз уже необходимый select. Короче работает не правильно.

Нужен специалист который разбирается в jquery

Пишите в ЛС - если нужно могу в slack или Zoom расшарить екран и показать как это сейчас работает.