не работает javascript после ajax

JS только изучаю. После загрузки (по клику кнопки) дополнительных карточек товара с помощью Ajax, на них перестает работать Javascript, в том числе сортировка. Как я понял, это происходит из-за того, что js сработал после загрузки страницы, а так как ajax страницу не перезагружает, то и нет эффекта на новых элементах. Не могу понять что надо подправить.

document.querySelector('.main-page__button').onclick = function() {
let showMore = function(data) {
    let list = $('.appartments')
     data.forEach(item => {
      let card =
        `<article class="appartments-item" tabindex="0">
          <div class="appartments-item__img-wrap">
            <img src="${item.img}" alt="план квартиры" class="appartments-item__img" title="${item.name}">
          </div>`
      list.append(card)
    })
  }
  $.ajax('https://api.myjson.com/bins/6dbie')
    .done(data => {
    showMore(data)
  })
    .fail(function() {
    alert('error');
  })};

А это должно работать на новых элементах Ajax

    $('.appartments-item__star').on('click', function() {
  if ($(this).attr('click-state') == 1) {
    $(this).attr('click-state', 0)
    $(this).css({'background-position':'-10px -10px'})
  } else {
    $(this).attr('click-state', 1)
    $(this).css({'background-position':'-50px -10px'})
  }
});

И сортировка

var items = document.querySelectorAll('.appartments-item');
var parent = document.querySelector('.appartments');
var SortElements = new Object();
items.forEach(function(item, indx){
  var itemValue = parseInt(item.querySelector('.appartments-item__price');
  SortElements[itemValue] = {'element': item, 'index': indx} ;
});
var keys = Object.keys(SortElements);
function compareNumeric(a, b) {
  a = parseInt(a);
  b = parseInt(b);
  if (a < b) return 1;
  if (a > b) return -1;
}
keys.sort(compareNumeric);
keys.map(function(key, indx){
  parent.insertAdjacentElement('beforeend', SortElements[key]['element']);
});