Develop Reference

Created Modal displays after click, then removes itself again

I created 2 Modals.The first modal, which is class = "modal" appears as it should when add button is clicked, but when I click the "+" sign on the form to display the next Modal which is the class = "category-modal that modal goes back to display none for some reason.
I made a runable code:
//get HTML elements username
let arrow = document.querySelector(".next");
let profSetting = document.querySelector(".prof-settings ul");
let asset = document.querySelector(".nav-side-asset");
//click event for username drop-down
arrow.addEventListener("click", () => {
arrow.classList.toggle('rotate-90');
profSetting.classList.toggle('transform');
asset.classList.toggle('position');
modal.classList.toggle('modal-position');
});
//get HTML elements assets
let arrowAsset = document.querySelector(".next-asset");
let assets = document.querySelector(".assets ul");
//click event for asset drop-down
arrowAsset.addEventListener("click", () => {
arrowAsset.classList.toggle('rotate-90');
assets.classList.toggle('transform');
})
//Generate tag ID
//get HTML elements modal
let modal = document.querySelector(".modal");
let addbtn = document.querySelector(".add-button");
let close = document.querySelector(".close");
let background = document.querySelector(".greyback")
//click event for modal pop up
addbtn.addEventListener("click", () => {
modal.style.display = "block";
genID()
background.style.display = "block";
})
//click event for modal remove itself
close.addEventListener("click", () => {
modal.style.display = "none";
})
function genID() {
let minNum = 0;
let maxNum = 1000;
let randomNum = Math.floor(Math.random() * (maxNum + 1) + minNum)
document.querySelector(".id").innerHTML = randomNum;
}
//get modal for category and department
let categoryModal = document.querySelector(".category-modal");
let categoryAdd = document.querySelector(".category-add");
let cancel = document.querySelector(".cancel");
categoryAdd.addEventListener("click", () => {
categoryModal.style.display = "block";
})
body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: var(--light-purplr);
}
:root {
--dark-purple: #3B3F8C;
--light-purplr: #4449A6;
--light-green: #6BBF54;
--darkish-green: #6FA656;
--lighter-white: #F2F2F2;
--light-white: #e9e9e9;
}
.greyback {
background-color: rgb(128, 128, 128, 0.7);
width: 120em;
height: 60.55em;
position: absolute;
display: none;
z-index: 1;
}
.nav-top {
background-color: var(--lighter-white);
display: grid;
grid-template-columns: 15em 70em 0em;
margin-left: -1em;
}
.nav-top ul {
display: flex;
width: 20vw;
margin-top: 1.5em;
}
.nav-top li {
list-style-type: none;
margin-left: 1em;
display: flex;
cursor: pointer;
padding: 8px 8px 8px 8px;
}
.nav-top li:hover {
background-color: var(--light-white);
}
.nav-banner img {
margin-left: 2em;
margin-top: 1em;
width: 14em;
height: 3em;
}
.nav-top ul img {
width: 1em;
height: 1em;
}
.profile {
width: 2em !important;
height: 2em !important;
margin-top: -0.5em;
}
.nav-side,
.nav-side-asset {
background-color: var(--lighter-white);
width: 13em;
height: 2.5em;
}
.nav-side ul,
.nav-side-asset ul {
background-color: var(--lighter-white);
position: absolute;
height: 2.5em;
margin-top: 8px;
width: 10.5em;
}
.nav-side li,
.nav-side-asset li {
list-style-type: none;
margin-top: 10px;
margin-left: 5px;
}
.profile-side,
.asset-side {
display: flex;
}
.profile-side img,
.asset-side img {
width: 1.5em;
height: 1.5em;
margin-left: 1em;
margin-top: 0.5em;
}
.profile-side p,
.asset-side p {
margin-left: 3em;
margin-top: 0.8em;
position: absolute;
}
.next,
.next-asset {
margin: 1em 11em !important;
width: 10px !important;
height: 10px !important;
position: absolute;
cursor: pointer;
transition: .2s transform ease;
}
.prof-settings ul,
.assets ul {
background-color: var(--lighter-white);
padding-bottom: 3em;
cursor: pointer;
display: none;
}
.assets li {
display: flex;
}
.assets img {
padding-right: 1em;
}
.list {
width: 1em;
}
.add-asset {
width: 1em;
margin-left: -1px;
}
.in,
.out {
width: 1.3em;
margin-left: -4px;
}
.assets ul {
padding-bottom: 6em !important;
}
.prof-settings li:hover,
.assets li:hover {
color: var(--light-green);
}
.rotate-90 {
transform: rotate(90deg);
}
.transform {
display: block !important;
}
.position {
margin-top: 5em;
}
.modal {
position: absolute;
/*display: none;*/
z-index: 2
}
.asset-modal-box {
background-color: var(--light-white);
width: 40em;
height: 40em;
margin-left: 40em;
}
.modal-position {
margin-top: -5em;
}
.form {
padding: 1em;
}
.section-left {
position: absolute;
width: 7em;
}
.section-right {
position: relative;
margin-left: 20em;
margin-top: 2.1em;
}
.brand-container,
.model-container,
.serial-container {
margin-bottom: 1em;
}
.item-container,
.date-purchased-container,
.cost-container,
.tag-container,
.tag-container {
margin-bottom: 1em;
}
.description-container,
.model-container,
.serial-container,
.brand-container,
.item-container,
.date-purchased-container,
.tag-container,
.cost-container {
display: grid;
}
.description-container {
margin-top: 3em;
margin-bottom: 1em;
}
.tag-container {
display: flex;
}
.item {
width: 20em;
}
.l-purchased {
width: 8em;
}
.currency {
background-color: var(--darkish-green);
width: 2em;
}
.rand {
display: flex;
height: 2em;
padding-left: 1em;
}
.rand p {
margin-top: 7px;
margin-left: -6px;
}
.cost {
margin-left: 1em;
position: absolute;
}
.item,
.brand,
.model,
.serial,
.date,
.cost,
.description,
.purchased,
.tag {
height: 26px;
}
.buttons {
margin: 0em 1em;
padding-top: 12em;
}
.submit,
.close {
margin-left: 6em;
padding: 1em 2em;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
border: none;
background-color: var(--light-green);
}
.close:hover {
background-color: red;
}
.department {
margin-left: 4.3em;
}
select {
width: 10em;
}
.category-modal {
background-color: var(--light-green);
width: 37em;
padding: 7px;
position: absolute;
margin-top: -32em;
display: none;
}
.category-modal h3 {
color: var(--dark-purple);
}
.line,
.line-bottom {
border-top: 1px solid black;
}
.line-bottom {
margin-top: 1em;
}
.category-input {
padding: 5px;
margin-left: 28.8em;
margin-top: 1em;
}
.add,
.cancel {
width: 4em;
border: none;
background-color: var(--dark-purple);
border-radius: 3px;
cursor: pointer;
margin-top: 1em;
color: var(--light-white);
padding: 5px;
}
.add {
margin-left: 33em;
}
.cancel {
margin-left: 1em;
}
.close-category {
position: absolute;
margin-top: -2.5em;
margin-left: 35em;
cursor: pointer;
}
<div class="greyback"></div>
<header>
<nav class="nav-top">
<div class="nav-banner">
<img src="./references/images/CS247-Pastel-Logo (1).jpg" alt="CS247 Logo">
</div>
<ul class="left">
<li><img src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li class="add-button"><img src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img src="./references/images/Search.png" alt="Search">Search</li>
</ul>
<ul class="right">
<li><img src="./references/images/clock.png" alt="clock">Changelog</li>
<li><img src="./references/images/tag.png" alt="clock">Buy Asset Tags</li>
<li><img class="profile" src="./references/images/profile pic.png" alt="profile pic"></li>
</ul>
</nav>
</header>
<main>
<aside>
<nav class="nav-side">
<div class="profile-side">
<img src="./references/images/profile pic.png" alt="profile pic">
<img class="next" src="./references/images/next.png" alt="next">
<p>Username</p>
</div>
<div class="prof-settings">
<ul>
<li>My Profile</li>
<li>Change Password</li>
<li>Log out</li>
</ul>
</div>
</nav>
<nav class="nav-side-asset">
<div class="asset-side">
<img src="./references/images/asset-management.png" alt="Asset icon">
<img class="next-asset" src="./references/images/next.png" alt="next">
<p>Assets</p>
</div>
<div class="assets">
<ul>
<li><img class="list" src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li><img class="add-asset" src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img class="in" src="./references/images/checkbox-in.png" alt="in icon">Assets In</li>
<li><img class="out" src="./references/images/X-out.png" alt="out icon">Assets Out</li>
</ul>
</div>
</nav>
</aside>
<div class="modal">
<div class="asset-modal-box">
<form class="form">
<!--Left of form inputs and labels-->
<div class="section-left">
<div class="tag-container">
<label for="tag" class="l-tag">Tag ID:</label>
<label class="id"></label>
</div>
<div class="item-container">
<label for="item" class="l-item">Item</label>
<input type="text" name="item" class="item">
</div>
<div class="date-purchased-container">
<label for="item" class="l-purchased">Date of Purchase</label>
<input type="date" name="item" class="purchased">
</div>
<div class="cost-container">
<label for="item" class="l-cost">Cost</label>
<div class="currency">
<div class="rand">
<p>R</p>
<input type="text" name="item" class="cost">
</div>
</div>
</div>
</div>
<!--Right of form inputs and labels-->
<div class="section-right">
<div class="brand-container">
<label for="brand" class="l-brand">Brand</label>
<input type="text" name="brand" class="brand">
</div>
<div class="model-container">
<label for="model" class="l-model">Model</label>
<input type="text" name="Model" class="model">
</div>
<div class="serial-container">
<label for="serial" class="l-serial">Serial No</label>
<input type="text" name="serial" class="serial">
</div>
</div>
<div class="description-container">
<label for="description" class="l-description">Description</label>
<input type="text" name="serial" class="description">
</div>
<!--Selections-->
<div class="options">
<label class="category" for="category">Category
<select name="category" id="category" class="category">
</select>
<button class="category-add">+</button>
</label>
<label class="department" for="department">Department
<select name="department" id="department" class="department-select"></select>
<button class="department-add">+</button>
</label>
<!--Modal for select options input-->
<div class="category-modal">
<h3>Add Catagory</h3>
<div class="close-category">X</div>
<div class="line"></div>
<p>If you want to add a new category of assets, you're in the right spot. Add a category for computer equipment, wireless keyboards, or any assets you're working with.
</p>
<input type="text" class="category-input">
<div class="line-bottom"></div>
<button class="add">Add</button>
<button class="cancel">Cancel</button>
</div>
</div>
<!--Form Buttons-->
<div class="buttons">
<button class="submit">Add Item</button>
<button class="close">Close</button>
</div>
</form>
</div>
</div>
</main>
I have attached a screenshot on what buttons to press to get to the issue:

I installed the code you have given and played with it. I noticed that the issue you are facing is due to the page being refreshed, the normal behaviour when you click on a button inside a form, which you can prevent with e.preventDefault(). For categoryAdd as an example:
categoryAdd.addEventListener("click", (e) => {
e.preventDefault();
categoryModal.style.display = "block";
});
Add e.preventDefault() for each button that don't need to refresh the page, after passing the event e as parameter like I did above.

My Slide Out Shopping Cart Wont Scroll With Page

https://github.com/koukalcreativeco/Web-Store.git
Github code is above, I have a slide out shopping cart on this page. When I add too many items to the cart they start to go off the screen. I want to be able to scroll down on the cart. How would I go about doing that?

This one can be implemented quite easily by making use of the overflow attribute of your .shoppingcart class in CSS.
Simply add overflow: auto to the shopping cart class as shown below.
/* adding functions to buttons */
const ready = () => {
var removeCartItemButtons = document.getElementsByClassName('bt-remove');
for (let i = 0; i < removeCartItemButtons.length; i++){
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input');
for (let i = 0; i < quantityInputs.length; i++){
var input = quantityInputs[i];
input.addEventListener('click', quantityChanged);
}
var addToCartButtons = document.getElementsByClassName('add-item-button');
for(let i = 0; i < addToCartButtons.length; i++){
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked);
}
document.getElementsByClassName('bt-purchase')[0].addEventListener('click', purchaseClicked);
}
/* In cart buttons and quantity */
function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
/* Adding Items to the Cart */
const addToCartClicked = (event) => {
var button = event.target;
var shopItem = button.parentElement.parentElement;
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText;
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText;
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
const addItemToCart = (title, price, imageSrc) => {
var cartRow = document.createElement('div');
cartRow.classList.add('cart-row');
var cartItems = document.getElementsByClassName('cart-items')[0];
var cartItemNames = cartItems.getElementsByClassName('cart-item-title');
for(let i = 0; i < cartItemNames.length; i++){
if (cartItemNames[i].innerText == title){
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="50" height="50">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="bt bt-remove" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow.getElementsByClassName('bt-remove')[0].addEventListener('click', removeCartItem);
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged);
}
/* Updating Total */
const updateCartTotal = () => {
var cartItemContainer = document.getElementsByClassName('cart-items')[0];
var cartRows = cartItemContainer.getElementsByClassName('cart-row');
var total = 0;
for (let i = 0; i < cartRows.length; i++){
var cartRow = cartRows[i];
var priceElement = cartRow.getElementsByClassName('cart-price')[0];
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
var price = parseFloat(priceElement.innerText.replace('$', ''));
var quantity = quantityElement.value;
total = total + (price * quantity);
}
total = Math.round(total * 100) / 100;
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total;
}
/* Shopping Cart Animation */
const navSlide = () => {
const cart = document.querySelector('#cart');
const nav = document.querySelector('.shopping-cart');
cart.addEventListener('click', () =>{
nav.classList.toggle('nav-active')
});
}
/* Calling All Functions */
navSlide();
ready();
* {
color: #FF875B;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
overflow-x: hidden;
font-family: 'Roboto Flex', sans-serif;
}
.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Header section*/
header {
display: flex;
width: 100%;
position: fixed;
z-index: 20;
height: 75px;
background-color: #FED9CB;
align-items: center;
}
.nav {
display:flex;
justify-content: flex-end;
padding-right: 10px;
flex: 4 1 0%;
}
#cart{
cursor: pointer;
}
a {
margin-left: 25px;
margin-right: 5px;
}
#logo {
height: 75px;
width: 75px;
}
.material-icons {
font-size: 75px;
color: white;
}
/* Home Page Section*/
#feature {
height: 700px;
width: 100%;
background-image: url("./photos/feature.JPG");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: 70px;
display:flex;
margin: 0 auto;
justify-content: center;
}
#feature .content {
margin: auto;
background-color: #FFF4F0;
height: 100px;
width: 100%;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
letter-spacing: 5px;
}
/* Store Section */
#store {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Luxurious Roman', cursive;
font-weight: bold;
}
#store h3 {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
}
#items {
display: flex;
justify-content: space-around;
align-items: center;
font-family: 'Abel', sans-serif;
}
#store img {
height: 240px;
width: 240px;
border-radius: 25px;
border-color: #FED9CB;
border: 3px;
}
.store-info {
display: flex;
justify-content:center;
flex-flow:column wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.bt {
border-radius: 15px;
background-color:#FF875B;
border-color: #FFF4F0;
color:#FFF4F0;
padding: 5px 10px;
}
.bt:hover {
background-color: #FFF4F0;
color: #FF875B;
cursor: pointer;
}
/* Footer Section */
footer {
background-color: #FED9CB;
width: 100%;
height: 100px;
bottom: 0px;
}
#footer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* Shopping Cart Section */
.cart-row {
display: flex;
justify-content: space-between;
align-items:flex-start;
flex-direction: column;
width: 75%;
margin: 20px;
}
.cart-item {
display: flex;
justify-content: center;
flex-direction: column;
}
.cart-quantity input {
border: none;
appearance: none;
background: #FFF4F0;
padding: 12px;
border-radius: 10px;
width: 100px;
}
.container {
position: relative;
width: 80px;
height: 50px;
border-radius: 40px;
border: 2px solid;
transition: 0.5s;
}
.container .next{
position: absolute;
top: 50%;
right: 10px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #FFF4F0;
border-left: 2px solid #FFF4F0;
z-index: 1;
transform: translateY(-50%) rotate(135deg);
cursor: pointer;
}
.container .prev{
position: absolute;
top: 50%;
left: 10px;
display: block;
width: 12px;
height: 12px;
border-top: 2px solid #FFF4F0;
border-left: 2px solid #FFF4F0;
z-index: 1;
transform: translateY(-50%) rotate(315deg);
cursor: pointer;
}
#box span{
position: absolute;
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 46px;
color:#FFF4F0;
font-size: 24px;
font-weight: 700;
user-select: none;
}
.cart-item-image {
border-radius: 20px;
}
.shopping-cart h5{
letter-spacing: 5px;
}
.shopping-cart {
position:absolute;
right: 0px;
height: 93vh;
top:7vh;
background-color: #FED9CB;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
overflow: auto;
}
.nav-active {
transform: translateX(0%);
}
/*Phone Screen */
#media only screen and (max-width: 780px) {
.shopping-cart {
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" />
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght#8..144,200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Montserrat:wght#200&family=Roboto+Flex:opsz,wght#8..144,200&display=swap" rel="stylesheet">
<title>Store</title>
</head>
<body>
<script type="text/babel" src="./index.js" async></script>
<header class="flex-container">
<img src="./photos/logo.png" id="logo"/>
<div class="nav">
<i class="material-icons">home</i>
<a id="cart-btn"><i id="cart" class="material-icons">shopping_cart</i></a>
</div>
<div class="shopping-cart">
<h5>Cart</h5>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="bt bt-purchase" type="button">PURCHASE</button>
</div>
</header>
<main>
<div id="feature" class="flex-container">
<div class="content">
<h3>EVERMAY</h3>
</div>
</div>
<div id="store" class="flex-container">
<h3>ITEMS</h3>
<div class="flex-container" id="items">
<div class="item">
<img class="shop-item-image" src="./photos/IMG1.JPG" />
<div class="store-info">
<span class="shop-item-title">DAILY REMINDER</span>
<p class="shop-item-price">$9.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG2.JPG" />
<div class="store-info">
<span class="shop-item-title">CHECKERED</span>
<p class="shop-item-price">$4.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG3.JPG" />
<div class="store-info">
<span class="shop-item-title">LA LUNE</span>
<p class="shop-item-price">$12.99</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG4.JPG" />
<div class="store-info">
<span class="shop-item-title">LE SOLEIL</span>
<p class="shop-item-price">$5.95</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG5.JPG" />
<div class="store-info">
<span class="shop-item-title">ABSTRACT OCEAN</span>
<p class="shop-item-price">$7.50</p>
<button class="bt add-item-button">+</button>
</div>
</div>
<div class="item">
<img class="shop-item-image" src="./photos/IMG6.JPG" />
<div class="store-info">
<span class="shop-item-title">GARDEN</span>
<p class="shop-item-price">$10.25</p>
<button class="bt add-item-button">+</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="flex-container" id="footer">
<h5>CONTACT</h5>
<P>Evermay#gmail.com</P>
<p>(111) 111-1111</p>
</footer>
</body>
</html>

My "Total Number' Will iterate different number amounts, even though I used --

I have a shopping cart and it displays how many items are in the cart. It will go up by one if you press 'Add to cart' and will go down by one when you press 'remove'. I have a bug that does this.. When I press each 'remove' button it will take away different types of amounts from the 'total number' depending on which 'remove' button I click, and I want each button to only take away one number on each click event
CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
<script src="app.js"async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 160vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
JAVSCRIPT:
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
cartbtn.addEventListener('click', function(){
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function(){
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault(){
let qinput = document.getElementsByClassName('qinput')
for(let i = 0; i < qinput.length; i++){
qinput[i].value= 1;
}
}
InputToDefault()
function RemoveItem(){
for (i = 0; i < removebtn.length; i++){
let rbutton = removebtn[i];
rbutton.addEventListener("click", function (){
//HERRE IS THE ISSUE.... HERE IS THE ISSUE...
let TotalNumbervalue = TotalNumber.innerText
if(TotalNumbervalue > 0){
// console.log(TotalNumbervalue)
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}
}
RemoveItem()
function AddItemtoCart(){
for (i = 0; i < Atc.length; i++){
let button = Atc[i];
button.addEventListener("click", function (){
let TotalNumbervalue = TotalNumber.innerHTML
if(TotalNumbervalue > -1){
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent
cartitems.append(cartrow)
qinput.value = 1
InputToDefault()
RemoveItem()
})
}
}
AddItemtoCart()

I didn't go through the rest of your code, but the way you're creating the Remove item event listeners doesn't really make sense. Why call a function when you just need run through the loop. The reason why you're not getting the result you expect is because the innerText is a string and you can't do math on strings. Instead, convert it to a number by putting a + in front of it.
for (i = 0; i < removebtn.length; i++) {
let rbutton = removebtn[i];
rbutton.addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText.trim()
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}

removeItem() loops through all remove button elements and adds a click listener that deletes the parent. You call this everytime a new item is added, which means eventually multiple click listeners "stack up" and you have multiple click listeners removing 1 from the total.
Instead, assign the click event listener after appending the element, ensuring only 1 click event listener will be applied
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
cartbtn.addEventListener('click', function() {
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function() {
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault() {
let qinput = document.getElementsByClassName('qinput')
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
}
}
InputToDefault()
function AddItemtoCart() {
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let TotalNumbervalue = TotalNumber.innerHTML
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow)
cartitems.lastChild.querySelector('.removebtn').addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText;
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
this.parentElement.parentElement.remove()
})
qinput.value = 1
InputToDefault()
})
}
}
AddItemtoCart()
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
overflow-x: hidden;
}
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav {
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
margin-right: 2.5%;
}
.navcartcontainer {
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover {
transform: scale(1.15);
}
.p1 {
height: 100vh;
position: relative;
}
.p1 img {
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after {
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 2.2rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: 160vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
}
.itemcontainer {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<script src="app.js" async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>

Sort and append content based on value difference of specific data attribute

I'm attempting to create a function that sorts elements based on their numerical separation from the data-attribute value of a designated "leader."
Here's what I'm trying to achieve:
If the participant data-title value is less than or equal to 4 from the data-title of the "leader" then they are appended to playoffs
If the data-title value is greater than 4 from the data-title of the "leader" than they are appended to out.
I'm hoping to keep the leader in place and only sort/append the elements that are equal to or larger than the leader data-title into their respective categories. How can I adjust the code below to facilitate something like this?
var participant = $('.participant')
var leader = $('#leader')
$(participant).sort(function (a, b) {
var contentA = parseInt( $('.participant').data('title'));
var contentB = parseInt( $(leader).data('title'));
if (contentA - contentB <= 4) {
$(participant).appendTo('#in-race');
}
else {
$(participant).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>

To keep the leader in place and only sort the other participants you can do this:
var participant = $('.participant:not(:has(#leader))');
var leader = $('#leader')
participant.each(function() {
var contentA = parseInt($(this).find(".score").data("title"));
var contentB = parseInt(leader.data("title"));
if (contentA - contentB <= 4) {
$(this).appendTo('#in-race');
} else {
$(this).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>

How to get the total amount and difference of all 'input type = "number"' stepper.js on the page using javascript?

I use stepper.js (https://github.com/gijsroge/stepper.js) to customize the 'input type = "number"' in the price calculator and encountered a problem when writing javascript code.
There are several 'input type = "number"' with the date attribute 'data-value' and the total value of the stepper is made up of the product 'input type = "number"' and 'data-value'.
It is necessary when increasing the value (clicking on "+") of one of the steppers, add it to the total amount of 3 steppers, and decreasing (pressing on "-"), on the contrary, reduce the total amount.
My code separately displays the value of each stepper, but I did not succeed in correctly displaying the total value when adding and subtracting.
I am new to javascript. Can you help me write the code correctly so that it is calculated correctly?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Step</title>
<style media="screen">
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 1em;
margin: 0 auto;
}
.stepper {
display: inline-block;
max-width: 120px;
width: 100%;
position: relative;
}
.stepper__input {
width: 100%;
height: 50px;
padding: .375rem .75rem;
border: 1px solid #c4c4c4;
-moz-appearance: textfield;
}
.stepper__input:focus {
color: #333;
background-color: #fff;
border-color: #c4c4c4;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.stepper__controls [spinner-button="up"],
.stepper__controls [spinner-button="down"] {
display: flex;
align-content: center;
justify-content: center;
padding: 0;
outline: none;
border: 1px solid #c4c4c4;
background-color: #fff;
height: 50%;
font-size: 1.375em;
line-height: 0;
transition: all ease 0.25s;
}
.stepper__controls [spinner-button="up"]:hover,
.stepper__controls [spinner-button="down"]:hover {
background-color: #333;
border-color: #333;
color: #fff;
}
.stepper--style-2 {
max-width: 140px;
}
.stepper--style-2 .stepper__input {
padding-left: 3.25rem;
padding-right: 3.25rem;
text-align: center;
}
.stepper--style-2 [spinner-button="up"],
.stepper--style-2 [spinner-button="down"] {
position: absolute;
height: 100%;
top: 0;
bottom: -1px;
width: 2.5rem;
z-index: 1;
}
.stepper--style-2 [spinner-button="up"] {
right: 0;
margin-left: -1px;
}
.stepper--style-2 [spinner-button="down"] {
left: 0;
margin-right: -1px;
}
</style>
</head>
<body>
<section>
<p>Stepper 1</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="10">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
<p>Stepper 2</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="20">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
<p>Stepper 3</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="30">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/stepper.js#1.0.3/dest/stepper.min.js">
</script>
<script>
var stepp = document.getElementsByClassName('stepper__input');
for (var i = 0; i < stepp.length; i++) {
stepp[i].onchange = function steppChange(evt) {
var total = parseInt(evt.target.getAttribute('data-value') * evt.target.value);
console.log(total);
}
}
</script>
</body>
</html>

You need to traverse stepper__input one again
for (var i = 0; i < stepp.length; i++) {
stepp[i].onchange = function steppChange(evt) {
var total = 0
for (var j = 0; j < stepp.length; j++) {
total += parseInt(stepp[j].getAttribute('data-value') * stepp[j].value);
}
console.clear();
console.log(total);
}
}
.as-console-wrapper {
z-index: 2!important;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Step</title>
<style media="screen">
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 1em;
margin: 0 auto;
}
.stepper {
display: inline-block;
max-width: 120px;
width: 100%;
position: relative;
}
.stepper__input {
width: 100%;
height: 50px;
padding: .375rem .75rem;
border: 1px solid #c4c4c4;
-moz-appearance: textfield;
}
.stepper__input:focus {
color: #333;
background-color: #fff;
border-color: #c4c4c4;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.stepper__controls [spinner-button="up"],
.stepper__controls [spinner-button="down"] {
display: flex;
align-content: center;
justify-content: center;
padding: 0;
outline: none;
border: 1px solid #c4c4c4;
background-color: #fff;
height: 50%;
font-size: 1.375em;
line-height: 0;
transition: all ease 0.25s;
}
.stepper__controls [spinner-button="up"]:hover,
.stepper__controls [spinner-button="down"]:hover {
background-color: #333;
border-color: #333;
color: #fff;
}
.stepper--style-2 {
max-width: 140px;
}
.stepper--style-2 .stepper__input {
padding-left: 3.25rem;
padding-right: 3.25rem;
text-align: center;
}
.stepper--style-2 [spinner-button="up"],
.stepper--style-2 [spinner-button="down"] {
position: absolute;
height: 100%;
top: 0;
bottom: -1px;
width: 2.5rem;
z-index: 1;
}
.stepper--style-2 [spinner-button="up"] {
right: 0;
margin-left: -1px;
}
.stepper--style-2 [spinner-button="down"] {
left: 0;
margin-right: -1px;
}
</style>
</head>
<body>
<section>
<p>Stepper 1</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="10">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
<p>Stepper 2</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="20">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
<p>Stepper 3</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="30">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/stepper.js#1.0.3/dest/stepper.min.js">
</script>
<script>
var stepp = document.getElementsByClassName('stepper__input');
for (var i = 0; i < stepp.length; i++) {
stepp[i].onchange = function steppChange(evt) {
var total = 0
for (var j = 0; j < stepp.length; j++) {
total += parseInt(stepp[j].getAttribute('data-value') * stepp[j].value);
}
console.clear();
console.log(total);
}
}
</script>
</body>
</html>

You can get all inputs and each time there is a change in the input, you can compute the total regardless of increment or decrement, consider the following jQuery solution:
$(".stepper__input").on('change', function() {
var total = 0;
$(".stepper__input").each((a,b) => total += +b.value * $(b).data('value'));
$("#total").html(total);
});
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 1em;
margin: 0 auto;
}
.stepper {
display: inline-block;
max-width: 120px;
width: 100%;
position: relative;
}
.stepper__input {
width: 100%;
height: 50px;
padding: .375rem .75rem;
border: 1px solid #c4c4c4;
-moz-appearance: textfield;
}
.stepper__input:focus {
color: #333;
background-color: #fff;
border-color: #c4c4c4;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.stepper__controls [spinner-button="up"],
.stepper__controls [spinner-button="down"] {
display: flex;
align-content: center;
justify-content: center;
padding: 0;
outline: none;
border: 1px solid #c4c4c4;
background-color: #fff;
height: 50%;
font-size: 1.375em;
line-height: 0;
transition: all ease 0.25s;
}
.stepper__controls [spinner-button="up"]:hover,
.stepper__controls [spinner-button="down"]:hover {
background-color: #333;
border-color: #333;
color: #fff;
}
.stepper--style-2 {
max-width: 140px;
}
.stepper--style-2 .stepper__input {
padding-left: 3.25rem;
padding-right: 3.25rem;
text-align: center;
}
.stepper--style-2 [spinner-button="up"],
.stepper--style-2 [spinner-button="down"] {
position: absolute;
height: 100%;
top: 0;
bottom: -1px;
width: 2.5rem;
z-index: 1;
}
.stepper--style-2 [spinner-button="up"] {
right: 0;
margin-left: -1px;
}
.stepper--style-2 [spinner-button="down"] {
left: 0;
margin-right: -1px;
}
<section>
<div>total<span id="total"></span></div>
<p>Stepper 1</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="10">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
<p>Stepper 2</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="20">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
<p>Stepper 3</p>
<div class="stepper stepper--style-2 js-spinner">
<input type="number" min="0" max="100" step="1" value="0" class="stepper__input" data-value="30">
<div class="stepper__controls">
<button type="button" spinner-button="up">+</button>
<button type="button" spinner-button="down">-</button>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/stepper.js#1.0.3/dest/stepper.min.js">
</script>