Как динамически менять значения в кастомном селекте?

Есть кастомный селек, который скрывает обычный и создает кастомный на дивах

$('#petPageBreed').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;
    $this.addClass('select-hidden');
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');
    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());
    var $list = $('<ul />', {
      'class': 'select-options'
    }).insertAfter($styledSelect);
    for (var i = 0; i < numberOfOptions; i++) {
      $('<li />', {
        text: $this.children('option').eq(i).text(),
        rel: $this.children('option').eq(i).val()
      }).appendTo($list);
    }
    var $listItems = $list.children('li');
    $styledSelect.click(function(e) {
      e.stopPropagation();
      $('div.select-styled.active').not(this).each(function(){
        $(this).removeClass('active').next('ul.select-options').hide();
      });
      $(this).toggleClass('active').next('ul.select-options').toggle();
    });
    $listItems.click(function(e) {
      e.stopPropagation();
      $styledSelect.text($(this).text()).removeClass('active');
      $styledSelect.attr('rel', $(this).attr('rel'));
      $this.val($(this).attr('rel'));
      $list.hide();
      $this.trigger('changed');
    });
    $(document).click(function() {
      $styledSelect.removeClass('active');
      $list.hide();
    });
  });

Нужно, чтобы значения в него подставлялись динамически из разных массивов по клику на радиокнопки. С обычными селектами срабатывает так:

$('.radio').on('change', radioChange);
  function radioChange() {
    if($("#radioCats").is(":checked")){
      $('#petPageBreed').empty();
      $.each(pets.cats, function (index, item) {
        $('#petPageBreed').append($("<option value=\"" + item + "\">" + item + "</option>"));
      });
    } if ($("#radioDogs").is(":checked")){
      $('#petPageBreed').empty();
      $.each(pets.dogs, function (index, item) {
        $('#petPageBreed').append($("<option value=\"" + item + "\">" + item + "</option>"));
      });
    };
  }

Но с кастомным так не срабатывает. Как подредактировать код, чтобы в кастомном значения тоже заменялись?

Структура верстки:

<div class="petPage_row">
          <div class="petPage_item">
            <div class="petPage_text">Тип питомца</div>
            <div class="petPage_radioBox">
              <label class="radio">
                <input id="radioCats" type="radio" name="type" value="cat" required checked>
                <div class="radio_text">Кошка</div>
              </label>
              <label class="radio">
                <input id="radioDogs" type="radio" name="type" value="dog" required>
                <div class="radio_text">Собака</div>
              </label>
            </div>
          </div>
          <div class="petPage_item">
            <div class="petPage_text">Порода</div>
            <select name="breed" id="petPageBreed"></select>
          </div>
        </div>

options из массива подставляются