панель сортировки каталога, общий Get на несколько текущих параметров
 

привет, использую framework uikit3 (поскольку только осваиваюсь), делаю панель сортировки каталога - 4 кнопки с выпадающим списком (не form) - (по критериям - byName, направлению - byDir, количеству на странице - byCount и виду каталога - byView) каждая кнопка формирует общий список параметров
<a href="?ByName=Price&byDir=asc&byCount=25&byView=Li st...

значение для каждой из кнопок - выбираются по hover из модального окна со списком <ul><li> (для каждой свой) и по закрытию окна выбора подставляются на свое место в параметрах href для выбранной кнопки (на этом фреймворк кончается)) и начинается вопрос)

1. если я меняю критерий у одной кнопки - href формируется корректно (подставляется свой параметр) и по нажатию отправляется get запрос на перезагрузку страницы/каталога

2. а если меняю несколько кнопок и нажимаю на одну из них - href формируется только под данную кнопку - остальные параметры (для остальных кнопок) из предыдущей сессии - текущие выбранные значения не учитываются

т.е. нужно по событиям выбора значений кнопок - формировать общий href с выбранными значениями и подставлять его всем 4м кнопкам

как к этому подойти?
написать jscript класс (4 переменные + 4 события) - отлавливать события выбора значений кнопок - передавать их ajax во внешний php, там формировать общий href и передавать его обратно всем 4м кнопкам подставляя в href?

не могу пока понять общий алгоритм действий, подскажите как правильно?

код для двух кнопок настройки каталога под framework uikit3
 

<div class="uk-position-relative">
  <nav class="uk-navbar-container" uk-navbar="dropbar: false; dropbar-mode: push">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav">

<?/*-НАПРАВЛЕНИЕ----------------------------------------------------------------------------------------------*/?>
        <li>
          <div class="uk-navbar-item" id="sort_click_byDir">
            <ul class="uk-link-reset uk-switcher my-sort-list-byDir" title="сортировка по направлению" uk-tooltip>
              <li class><a href="?byDir=asc" uk-icon="icon: chevron-up;"></a></li>
              <li class="uk-active"><a href="?byDir=desc" uk-icon="icon: chevron-down;"></a></li>
            </ul>
          </div>

          <div uk-dropdown="mode: hover; " id="sort_hover_byDir">
            <span>направление</span>
            <hr class="uk-divider-small">
            <ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: .my-sort-list-byDir">
              <li class><a href="">по возрастанию</a></li>
              <li class="uk-active"><a href="">по убыванию</a></li>
            </ul>
          </div>
        </li>

<?/*-КРИТЕРИЙ----------------------------------------------------------------------------------------------*/?>
        <li>
          <div class="uk-navbar-item" id="sort_click_byName">
            <ul class="uk-link-reset uk-switcher my-sort-list-byName" title="сортировка по критерию" uk-tooltip>
              <li class><a href="?byName=date">Дата</a></li>
              <li class="uk-active"><a href="?byName=name">Наименование</a></li>
              <li class><a href="?byName=price">Цена</a></li>
            </ul>
          </div>

          <div uk-dropdown="mode: hover; " id="sort_hover_byName">
            <span>критерий</span>
            <hr class="uk-divider-small">
            <ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: .my-sort-list-byName">
              <li class><a href="">Дата</a></li>
              <li class="uk-active"><a href="">Наименование</a></li>
              <li class><a href="">Цена</a></li>
            </ul>
          </div>
        </li>
<?/*-end----------------------------------------------------------------------------------------------*/?>
      </ul>

    </div>
  </nav>
</div>

<script>
var str_href = {
    sort_byDir:"asc",
    sort_byName: "Наименование"
  }

  $('#sort_hover_byDir').on('beforehide', function () {
    str_href.sort_byDir = this.getElementsByClassName('uk-active')[0].textContent;
    console.log(str_href);
/*
    $.ajax({
      url: 'response.php?byDir='.str_href.sort_byDir.'&byName='str_href.sort_byName,
      success: function(data) {
        $(document.getElementById('sort_click_byDir').getElementsByClassName('uk-active')....html(data);
      }
    });
*/
  });

  $('#sort_hover_byName').on('beforehide', function () {
    str_href.sort_byName = this.getElementsByClassName('uk-active')[0].textContent;
    console.log(str_href);
    /*
        $.ajax({
          url: 'response.php?byDir='.str_href.sort_byDir.'&byName='str_href.sort_byName,
          success: function(data) {
            $(document.getElementById('sort_click_byName').getElementsByClassName('uk-active')....html(data);
          }
        });
    */
  });
	</script>

по идее структуру str_href нужно передать через ajax во внешний php и вернуть общий href="?byDir=asc&byName=Наименование" или можно на этой же странице сделать?

как это правильно записать?
чтобы ответ сразу разложился во все <li class="uk-active"><a href с id="sort_click_byDir" и id="sort_click_byName"

в принципе решение нарисовалось без ajax :)

<script>
var str_href = {
    sort_byDir:"asc",
    sort_byName: "Наименование"
  }

  $('#sort_hover_byDir').on('beforehide', function () {
    str_href.sort_byDir = this.getElementsByClassName('uk-active')[0].textContent;

    document.getElementById('sort_click_byDir').getElementsByClassName('uk-active')[0].getElementsByTagName('a')[0].setAttribute("href","?byDir=" + str_href.sort_byDir + "&byName=" + str_href.sort_byName);
  });

  $('#sort_hover_byName').on('beforehide', function () {
    str_href.sort_byName = this.getElementsByClassName('uk-active')[0].textContent;

    document.getElementById('sort_click_byName').getElementsByClassName('uk-active')[0].getElementsByTagName('a')[0].setAttribute("href","?byDir=" + str_href.sort_byDir + "&byName=" + str_href.sort_byName);
  });
</script>

или можно проще?