My goal is to incorporate a counter into this feature. When a number is clicked, the message should read "You've selected 1 out of 5," indicating that the user needs to choose 5 numbers. If the same number is clicked again, it should deselect and revert to displaying "You've selected 0 out of 5." So, for example, the user could click on numbers 1, 5, and 7, and then the message should update to "You've selected 3 out of 5."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>UniqueConcepts</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#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;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<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>
</ol>
</div>
</div>
<script>
// This allows each box to be clickable
let liSelected = [];
$("document").ready(function() {
$(".ui-widget-content").on("click", function() {
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
removeItem(liSelected, $(this).attr('text'));
}else{
$(this).addClass('ui-selecting');
liSelected.push($(this).attr('text'))
}
$("#select-result").text(liSelected.length === 0 ? "none" : liSelected.join(", "));
});
// Check for existing title in array and remove it
function removeItem(array, item){
for(var i in array){
if(array[i]==item){
array.splice(i,1);
break;
}
}
}
});
</script>
</body>
</html>