if I select more than 5 I want that another Html page will pop up like an ads to the user will unselect one of the 5 selected

let counter = 0;
    $('.switched').change(function () {

        if ($(this).parent().parent().hasClass('clicked')) {
            $(this).parent().parent().removeClass('clicked');
            $(this).parent().parent().addClass('notClicked');
            counter--;
            console.log(counter);
        }
        else if (counter == 5) {
            $("#htmlTemplate").empty();
            $("#htmlTemplate").load("popUp.html");
            $(".selectedCoins").append(".clicked");
        }
        else if ($(this).parent().parent().hasClass('notClicked')) {
                $(this).parent().parent().removeClass('notClicked');
                $(this).parent().parent().addClass('clicked');
                counter  ;
                console.log(counter);
        }
    });

CodePudding user response：

Yes you can add it through bootstrap modal for example given at this link,

https://getbootstrap.com/docs/4.1/components/modal/#vertically-centered

$('#myModal').modal('toggle')

and you can customize it as you want.

CodePudding user response：

I may have misunderstood your need but you don't necessarily need to go to another page to load an ad, especially if you want to interact with the previous one.

let counter = 0;
document.querySelectorAll(".select").forEach((e) => {
  e.addEventListener("click", () => {
    e.classList.toggle("selected");
    if(e.classList.contains("selected")){
      counter   ;
    }else{
      counter --;
    }
    if(counter == 5){
      document.getElementById("ad").classList.remove("d-none")
    }else{
      document.getElementById("ad").classList.add("d-none")
    }
  })
});

.select{
  display:inline-block;
}
.select, #ad{
  border:1px solid black;
  width:20px;
  height:20px;
  margin:5px;
  cursor:pointer;
}
#ad{
  background-color:blue;
}
.selected{
  background-color:orange;
}
.d-none{
  display:none;
}

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div id="ad" ></div>