We Keep Coding

How to toggle between three div's and two icons

When i click on one of the div the icon changes and it stays changed i want it when i click on it again to change back to how it was and to deselect itself is there any way i can change this without changing my code too much any suggestion?
function myFunction() {
var element = document.getElementById("demo");
element.classList.toggle("change");
}
function myFunction1() {
var element = document.getElementById("demo1");
element.classList.toggle("change");
}
function myFunction2() {
var element = document.getElementById("demo2");
element.classList.toggle("change");
}
$('.column1').click(function() {
var collapsed = $(this).find('i').hasClass('fas fa-check');
$('.example-class').find('i').removeClass('fas fa-check-circle');
$('.example-class').find('i').addClass('fas fa-check');
if (collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
});
.change {
border-color: blue;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div id="demo" onclick="myFunction()" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction1()" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction2()" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

Most Simplified jQuery solution
$('.column1').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
You don't need function or separate id for that just need a common class
$('.column1').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
/* Usefull CSS */
.column1.active{
color:blue;
border: 1px solid blue;
}
.fs5::before{
content:'\f00c';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.active .fs5::before{
content:'\f058';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/* Just Some random CSS */
.column1 {
display: flex;
align-items: center;
margin-bottom: 5px;
padding: 0 5px
}
.column1 * {
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div class="column1">
<span class="fs5"></span>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div class="column1 active">
<span class="fs5"></span>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div class="column1">
<span class="fs5"></span>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

function myFunction(el) {
// Toggle the class on main element
el.classList.toggle("change");
// Toggle both check and circle check classes
el.querySelector('i').classList.toggle('fa-check')
el.querySelector('i').classList.toggle('fa-check-circle')
}
.change {
border-color: blue;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row1">
<div id="demo" onclick="myFunction(this)" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction(this)" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction(this)" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

Does this help? Modified your click(function(){});.
function myFunction() {
var element = document.getElementById("demo");
element.classList.toggle("change");
}
function myFunction1() {
var element = document.getElementById("demo1");
element.classList.toggle("change");
}
function myFunction2() {
var element = document.getElementById("demo2");
element.classList.toggle("change");
}
$('.column1').click(function() {
var collapsed = $(this).find('i').hasClass('fas fa-check');
if (collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
if(!collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
});
.change {
border-color: blue;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div id="demo" onclick="myFunction()" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction1()" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction2()" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

Just recommendation.
Do you know alpin.js?
It will make it easy.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"
defer></script>
<div class="row1" x-data="sampleData">
<template x-for="item in items">
<div id="demo" #click="check($event, item)" class="column1"
:class="{change:item.checked}">
<i class="fas"
:class="item.checked?'fa-check-circle':'fa-check'"></i>
<h2 x-text="item.title"></h2>
<p x-text="item.line1"></p>
<p x-text="item.line2"></p>
</div>
</template>
</div>
<style>
.change {
border-color: blue;
color: blue;
}
</style>
<script>
window.sampleData = {
items: [
{
title: 'Lean',
line1: 'I am here to',
line2:'look arround',
checked: false
},
{
title: 'Start',
line1: 'I want to find my',
line2: 'first help desk',
checked: false
},
{
title: 'Switch',
line1: 'I\'m interested in',
line2: 'swtiching help desks',
checked: false
},
],
check(e, item) {
item.checked = !item.checked
}
}

Style changing with JS not responding

I am trying to change style to a component by "classList.add" but for some reasons it is working for the first two element and for all the rest is taking the new class.
Is there any reason why this is happening and how I can work around to fix this issue?
Basically a button in the page has opacity: 0.3, by selecting and answer the button will become active from disable and the opacity should be 1
Thanks
Here my example:
for (let i = 0; i < option.length; i++) {
[].forEach.call(opts, (el) => {
el.addEventListener("click", btnClick, false);
});
option[i].addEventListener("click", function() {
// console.log(option[i])
// console.log('CLICKED') // click on answer
move.classList.add("active");
nextSecond.classList.add("active");
nextThird.classList.add("active");
nextFour.classList.add("active");
nextFive.classList.add("active");
nextSix.classList.add("active");
nextSeven.classList.add("active");
});
}
function btnClick() {
[].forEach.call(opts, (el) => {
if (el !== this) el.classList.remove("selected");
});
this.classList.add("selected");
$(".next").removeAttr("disabled");
$(".nextSecond").removeAttr("disabled");
$(".nextThird").removeAttr("disabled");
$(".nextFour").removeAttr("disabled");
$(".nextFive").removeAttr("disabled");
$(".nextSix").removeAttr("disabled");
$(".nextSeven").removeAttr("disabled");
}
.btn {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 42px;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
color: #4BA21C;
border: 1px solid black;
width: 220px;
border-radius: 23px;
border: 2px solid #4BA21C;
height: 46px;
background-color: white;
&.btn-left {
margin-left: -56px;
}
&:hover {
cursor: pointer;
}
&.back,
&.next,
&.nextSecond,
&.nextThird.ans.active,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
width: 116px;
}
&.back {
color: #5C5C5C;
border: 2px solid #5C5C5C;
background-color: white;
}
&.next,
&.nextSecond,
&.nextThird,
&.nextFour,
&.nextFive,
&.nextSix,
&.nextSeven {
margin-right: 33px;
opacity: 0.3;
}
&.nextFour,
&.nextFive,
&.nextSix {
margin-right: -14px;
}
}
.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Question Page 3 -->
<div class="questionsPageThree hide">
<p class="number">3/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2 class="three">3. Do you have someone who you feel comfortable sharing your feelings with?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
&check; Yes
</button>
<button class="options choosen" type="submit" value="0">
&#120 No
</button>
</div>
<div class="right">
<div class="image-right question3"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextThird ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
<!-- Question Page 4 -->
<div class="questionsPageFour hide">
<p class="number">4/7</p>
<div class="second">
<h1>
<span>Info</span>mentum
</h1>
<p class="hero">
<span class="start">
>
</span> Making change work</p>
</div>
<div class="q">
<div class="left">
<h2>4. How many times this week would you say you felt stressed to the point of worry?</h2>
</div>
<div class="opt">
<button class="options choosen" type="submit" value="3">
<h4> 0</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="0">
<h4>1 - 2</h4>
<h6>TIMES</h6>
</button>
<button class="options choosen" type="submit" value="-2">
<h4>3 + </h4>
<h6>TIMES</h6>
</button>
</div>
<div class="right">
<div class="image-right question4"></div>
</div>
<section class="q1">
<button class="btn btn-left back" value="BACK" type="button">
BACK
</button>
<button class="btn btn-right nextFour ans" value="NEXT" type="button" disabled="disabled">
NEXT
</button>
</section>
</div>
</div>
javascript html jquery css class

jQuery/Javascript Can't get the "check" button to strike through an appended list item's name text

Have been trying to create an input that creates a list item typed into the input. Once that newly created item is created, I'm trying to make it possible for the user to press a "check" button and have the title of the item change to strike-through.
I have tried to use event delegation for clicking the button on appended items but can't get it to work!
Any help would be greatly appreciated!
$(function() {
$(".shopping-list").empty(); //clear the list when the browser is loaded for the first time
$('#js-shopping-list-form').submit(event => { //submission event
event.preventDefault() //prevent default submission behavior
//grab the value written in the add an item input
const shopItemEntry = $(event.currentTarget).find(
'input[name="shopping-list-entry"]').val();
//create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
$('.shopping-list').append(`<li>
<span class="shopping-item">${shopItemEntry}</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>`);
//listen for when the user clicks check. Add strikethrough to text for the item who's button is checked.
$('.ul').on('click', '.shopping-item', 'shopping-item-controls', '.shopping-item-toggle', function(event) {
$(this).closest('li.span').toggleClass('shopping-item__checked');
});
//listen for when the user clicks delete. Make the delete remove the item
$('.shopping-item-delete').click(function(event) {
this.closest('li').remove(); //remove the shopping item entry
});
});
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button,
input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list>li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item-checked {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item shopping-item__checked">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

The class you were adding is not what's defined in the css (.shopping-item__checked vs .shopping-item-checked). The selectors for the event and elements to be manipulated when the event happens were also not correct. The check and delete handlers were declared inside the form submit handler, which meant duplicates where registered each time an item was added to the list. See the updated code below.
$(function() {
$(".shopping-list").empty(); //clear the list when the browser is loaded for the first time
$("#js-shopping-list-form").submit(event => {
//submission event
event.preventDefault(); //prevent default submission behavior
//grab the value written in the add an item input
const shopItemEntry = $(event.currentTarget)
.find('input[name="shopping-list-entry"]')
.val();
//create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
$(".shopping-list").append(`<li>
<span class="shopping-item">${shopItemEntry}</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>`);
});
//listen for when the user clicks check. Add strikethrough to text for the item who's button is checked.
$(".shopping-list").on("click", ".shopping-item-toggle", function(event) {
$(this)
.closest("li")
.find(".shopping-item")
.toggleClass("shopping-item__checked");
});
//listen for when the user clicks delete. Make the delete remove the item
$(".shopping-list").on("click", ".shopping-item-delete", function(event) {
this.closest("li").remove(); //remove the shopping item entry
});
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button,
input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list>li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item shopping-item__checked">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

FadeOut one element and fadeIn another element on hover

I'm trying to achieve an effect where on the hover of an element A, an element B is fadeOut and an element C is fadeIn, both inside the element A.
That's what I tried:
$('.button').hover(function() {
info = $(this).find('.info');
download = $(this).find('.download');
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
Hovering one element at a time seems working fine but when you try to hover more elements concurrently the animation it starts to break.
Any solution? Other approaches are accepted. Thanks.

The main problem is to stop the animation before assigning another. This way there are no glitches:
$('.button').each(function(i) {
var thisButton = $(this);
var thisInfo = thisButton.find('.info');
var thisDownload = thisButton.find('.download');
thisButton.on('mouseenter', function(e) {
thisDownload.stop();
thisInfo.stop().fadeOut(150, function() {
thisDownload.stop().fadeIn(150);
});
}).on('mouseleave', function(e) {
thisInfo.stop();
thisDownload.stop().fadeOut(150, function() {
thisInfo.stop().fadeIn(150);
});
});
});
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
Also on JSFiddle
Posting this because this may happen to skyline's answer:

You are inadvertently creating global variables for info and download by omitting the var, let, or const keywords. That means every function call is using and overwriting those variables. You need to create local variables in each function.
$('.button').hover(function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
download.stop();
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
info.stop();
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>

Open a random popup div with random with different class number jQuery

As an all-time JS beginner, I'm trying to show a different popup each time on button click.
Tried a bunch of different things but nothing worked so far...
Each popup div has a class "pop" + a number afterward, so "pop1", "pop2"... On click, I want to show a different popup in random order.
HTML:
<div class="button">
<img class="" src="images/button.png">
</div>
<div class="pop1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop1 -->
<div class="pop2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop2 -->
my jQuery so far to show/hide the popup:
//show popup on click with a delay
setTimeout(function(){
$(".pop").removeClass("hide");
$(".pop").addClass("show");
$(".pop").show();
$(".success-msg").show();
}, 3800);
Trying to add new jQuery code to randomize the popup by allowing a different popup show:
$('.button ').click(function () {
class_is=$(this).attr('class').match(/block-[0-2]/,'');
$('.pop div').each(function() {
if($(this).attr('class').indexOf(class_is)!==-1) {
$(this).toggleClass('show');
$(this).siblings().removeClass('show');
}
})
});
Every advice is welcome.
Thanks

That could be done using just removeClass()/addClass() with the help of rand() to generate random numbers, like :
Simple solution :
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
var random = Math.floor(Math.random() * global_selector.length) + 1;
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>
Non-successive random solution (Avoiding successive random numbers):
var random = 1;
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
random = generateNonSuccessiveRand(1, global_selector.length, random);
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
function generateNonSuccessiveRand(min, max, previous) {
var rand = Math.floor(Math.random() * max) + min;
while (rand === previous) {
rand = Math.floor(Math.random() * max) + min
}
return rand;
}
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="error-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="info-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>

There is a million ways to achieve this... Basically, you need a way to identify which 'pop' you want to display, obviously lol.
Here is a simple pen showing the most basic way of doing it. It uses a variable to keep a count of each time the button div is clicked and used as the index to determine which 'pop' to show.
https://codepen.io/jthomas077/pen/BOemQQ
var popCntr = 0;
$('.button').on('click touchend', function (e)
{
$('.pop').hide().eq(popCntr).show();
popCntr++;
$('.pop-cntr').html(popCntr);
e.preventDefault();
});