I am creating a Website with different boxes being displayed to the user, and he can filter them by their Status (the dates are stored on a Django database). The possible statuses are "Active", "Upcoming" and "Ended".

The filtering works with Radio buttons, so he clicks whichever he likes and all other elements that don't match that description will be hidden.

I am not sure to how elegant this solution is overall. It seems as if I should aim to remove the repetitive structure at the end.

$(function(){

  // Radio buttons functionality
  var displayAllOption = $('#display-all-infos');
  var displayActiveOption = $('#display-active-infos');
  var displayUpcomingOption = $('#display-upcoming-infos');
  var displayEndedOption = $('#display-ended-infos');

  function showAllInfos(){
    $('.info-box').parent().show();
  }

  function hideInfosThatDontMatchOption(selectedOption){

    var infos = $('.info-box').parent();

    [].forEach.call(infos, function(info){
      var countdownContent = $(info).find('.info-box').find('.card-block').find('.countdown').html();

      // Hide every info that has not started, yet, based on the prefix
      // that is displayed at the beginning of the countdown timer
      if (!countdownContent.startsWith(selectedOption)){
        $(info).hide();
      }
    });
  }

  /*
     First lines change the Color highlighting by toggling the 'active' class

     Filter Logic: Make sure all info boxes are displayed at the beginning, and then
     hide all the info boxes that the User doesn't want to see
  */

  displayAllOption.on('click', function(){
    showAllInfos();
  });

  displayActiveOption.on('click', function(element){

    displayActiveOption.addClass('active')
    displayUpcomingOption.removeClass('active')
    displayEndedOption.removeClass('active')

    showAllInfos();
    hideInfosThatDontMatchOption('Time Left')
  });

  displayUpcomingOption.on('click', function(element){

    displayUpcomingOption.addClass('active')
    displayActiveOption.removeClass('active')
    displayEndedOption.removeClass('active')

    showAllInfos();
    hideinfosThatDontMatchOption('Starts In')
  });

  displayEndedOption.on('click', function(element){

    displayEndedOption.addClass('active') 
    displayActiveOption.removeClass('active')
    displayUpcomingOption.removeClass('active')

    showAllInfos();
    hideInfosThatDontMatchOption('Ended')
  });

});

I'd appreciate all feedback telling me how I can improve it.

Thanks in Advance!