Solution 1 :

You are currently displaying the array of selected items. Just display the length instead.

You can just change

$("#select-result").text(liSelected.length === 0 ? "none" : liSelected.join(", "));


$("#select-result").text(liSelected.length === 0 ? "none" : (liSelected.length + ' out of 5'));

Problem :

I’m trying to add a counter to this, so when a number is clicked, it should display “You’ve selected 1 out of 5” meaning the person has to select 5 numbers. But if the same number is clicked, it should deselect and then go back to “You’ve selected 0 out of 5”. So you could essentially click 1,5,7 but then it should display “You’ve selected 3 out of 5”

<!DOCTYPE html>
<html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <script src=""></script>
      <script src=""></script>
         #feedback {
         font-size: 1.4em;

         #selectable .ui-selecting {
           background: #FECA40;

         #selectable .ui-selected {
           background: #F39814;
           color: white;

         #selectable {
          list-style-type: none;
           margin: 0;
           padding: 0;
           width: 450px;

         #selectable li {
         margin: 10px;
         padding: 1px;
         float: left;
         width: 100px;
         height: 80px;
         font-size: 4em;
         text-align: center;

         .wrapper {
           display: flex;
           margin: auto;
           justify-content: center;
           align-items: center;
      <div class="wrapper">
            <p id="feedback">
               <span>You've selected:</span> <span id="select-result">none</span>.
            <ol id="selectable">
               <li class="ui-widget-content" text="car">1</li>
               <li class="ui-widget-content" text="truck">2</li>
               <li class="ui-widget-content" text="physics">3</li>
               <li class="ui-widget-content" text="maths">4</li>
               <li class="ui-widget-content" text="home automation">5</li>
               <li class="ui-widget-content" text="car6">6</li>
               <li class="ui-widget-content" text="car7">7</li>
               <li class="ui-widget-content" text="car8">8</li>
               <li class="ui-widget-content" text="car9">9</li>
               <li class="ui-widget-content" text="car10">10</li>
               <li class="ui-widget-content" text="car11">11</li>
               <li class="ui-widget-content" text="car12">12</li>
         // this makes each box clickable and adds it to an array the title.
         let liSelected = [];
$("document").ready(function() {
    $(".ui-widget-content").on("click", function() {
            removeItem(liSelected, $(this).attr('text'));
        $("#select-result").text(liSelected.length === 0 ? "none" : liSelected.join(", "));
//   this checks if the existing title is in the array and then removes it
    function removeItem(array, item){
        for(var i in array){


Comment posted by S.V.

Can you make it more clear in your question what output you’re getting and compare it to what you’re expecting?