Помогите со скриптом на выпадающее меню - Выбор оплаты!

На странице Woocommerce Чекаут (Страница оформления заказа) хочу добавить свои поля.

Первое поле " Способ оплаты"

По задуманному должно быть так!

Пока набросал так:

Никак не могу найти функцию на открытие и выбор меню, помогите пожалуйста!!

html:

<div class="x-order-form-row">

<div class="x-order-form-row__label">Способ оплаты:</div>

<div class="x-order-form-row__field x-order-form-row__field_pos_relative"><div class="js-toggle x-drop-down" data-qaid="payment_option">

<span class="x-drop-down__value"><span>Выберите способ оплаты</span></span>

<span class="x-drop-down__arrow"></span>

<input type="hidden" id="payment_option" name="payment_option" value="">

<ul class="x-drop-down__list js-dropdown">

<li class="x-drop-down__list-item js-item">

<span class="x-drop-down__icon-wrapper">

<i class="x-drop-down__icon icon-common_payment"></i></span>

<span class="x-drop-down__text"><img src="/wp-content/themes/Divi/images/privatbank.png" width="25px" alt="альтернативный текст">Безналичный расчет</span></li><li class="x-drop-down__list-item js-item"><span class="x-drop-down__icon-wrapper"><i class="x-drop-down__icon icon-common_payment"></i></span>

<span class="x-drop-down__text"><img src="/wp-content/themes/Divi/images/Без названия.png" width="25px" alt="альтернативный текст">Наложенный платеж</span></li></ul></div></div></div>

<script src="wp-content/themes/Divi/js/jquery-3.3.1.min.js"></script>

<script>

var link = $('.x-drop-down');

link.click(function(){

link.toggleClass('x-drop-down__list-active');

});

</script>