Как я могу изменить элемент списка индикаторов в активное состояние, когда я нажимаю на каждый элемент для карусели?

Question

У меня есть Карусель Bootstrap 4, которая генерируется с помощью JavaScript. Я успешно смог создать интерактивный индикатор с текстом, сгенерированным из json для каждого элемента li в индексе. Мне удалось заставить элемент списка корректно перейти в состояние list-group-item active (и изменить все остальные обратно на list-group-item), когда я перебираю карусель, нажимая на следующую или предыдущую. Но когда я нажимаю на индикаторы, они становятся активными, но я не могу заставить его переключиться обратно в неактивное состояние при нажатии на каждый из них. Вот мой код:

  $indicators
    .appendTo($quiz);

  $.each(questions, function(question_index, question) {
    $('<li>')
      .attr('class', 'list-group-item')
      .html(question.prompt)
      .attr('class', question_index ? "" : "list-group-item")
      .click(function() { 
$quiz.carousel($(this).index());
     $(this).toggleClass('list-group-item active');
            })
      .appendTo($indicators);
  });

Может кто-нибудь помочь, пожалуйста? Заранее спасибо.