Сортировка срабатывает только после 2-го нажатия

HTML:

<div class="sorting">
 <div class="sort-by">Сортировать по:</div>
 <div class="sorting-sections">
  <div class="sort-prices sort">
   <div class="prise-sort-min-max" id="price" onclick="priseSort()">Цена</div>
  </div>
  <div class="sort-prices sort" >
   <div class="weight-sort-min-max" id="weight" onclick="weightSort()">Вес</div>
  </div>
  <div class="sort-prices sort">
   <div class="wiews-sort-min-max" id="wiews" onclick="wiewsSort()">Популярность</div>
  </div>
 </div>
</div>

Этот кусок срабатывает при загрузке страницы и вроде не вызывает проблем:

function defSort() {
  cards.sort(function (a, b) {
    return a.id - b.id;
  });

  console.log(myarray);
}
render();


//Но при нажатии на div с этой частью начинаются проблемы, в теории карточки товаров должны отсортировываться, но это происходит только после 2-го нажатия.


function wiewsSort() {
  if (document.getElementById("wiews").className == "wiews-sort-min-max") {
    $(".wiews-sort-min-max").click(function defSort() {
      cards.sort(function (a, b) {
        return b.wiews - a.wiews;
      });
      $("#wiews").removeClass("wiews-sort-min-max");
      $(this).addClass("wiews-sort-max-min");

      console.log(myarray);
    });
  } else {
    $(".wiews-sort-max-min").click(function defSort() {
      cards.sort(function (a, b) {
        return a.wiews - b.wiews;
      });
      $("#wiews").removeClass("wiews-sort-max-min");
      $(this).addClass("wiews-sort-min-max");

      console.log(myarray);
    });
  }
  render();
}