jQuery: вызов метода внутри слушателя событий приводит только к правильному поведению каждый раз

Question

В своем мини-приложении я построил область функций, видимость которой можно переключать. Приложение также содержит пару ссылок. Поскольку я хотел, чтобы функция переключения работала только после нажатия на одну из ссылок, я разрешаю это, только если одна из ссылок имеет класс active. Однако теперь у меня есть проблема в том, что это работает, только если я дважды вызываю метод viewFeature.toggleFeature внутри EventListener. В противном случае переключение будет успешным только для каждой другой ссылки (см. Фрагмент).

Можете ли вы сказать мне, почему это так? Где я все испортил?

// _____ MODEL _____  //

let model = {
  linkList: ['Link1', 'Link2', 'Link3', 'Link4', 'Link5'],
  currentLink: undefined,
};


// _____ CONTROLLER _____  //

let controller = {
  getLinks: function() {
    return model.linkList;
  },
  getCurrentLink: function() {
    return model.currentLink;
  },
  init: function() {
    viewList.init();
  }
};

// _____ VIEW _____  //

let viewList = {
  init: function() {
    $.each(controller.getLinks(), function(index) {
      $('.link-list').append('<p class="link-name link-name-' + index + '">' + controller.getLinks()[index] + '</p>');

      $('.link-name-' + index).click(function(e) {
        //viewFeature.toggleFeature();
        $('.link-name').removeClass('active');
        $(this).addClass('active');
        viewFeature.toggleFeature();
      });
    });
  }
};

// _____ VIEW (FEATURE) _____  //

let viewFeature = {
  toggleFeature: function() {
    if ($('.active').length) {
      $('.feature-btn').click(function(e) {
        $('.feature-wrap').toggleClass('visible');
      });
    }
  }
};

controller.init();

.link-name {
  cursor: pointer;
  display: inline-block;
  padding: 0 20px;
}

.link-name.active {
  color: green;
}

.feature-btn {
  width: 100%;
}

.feature-wrap {
  display: none;
  padding: 30px;
  background-color: #eee;
}

.feature-wrap.visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-list">
</div>

<div class="feature-area">
  <button class="btn feature-btn">Features</button>
  <div class="feature-wrap">
    <div class="input-wrap name">
      <label for="input-name" class="label-name">Name</label>
      <input type="text" class="input-name">
    </div>
    <button class="btn save-btn">Save</button>
  </div>