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.

Collect prices with jQuery

I need to be able to add and display the amount when the numbers are entered using jQuery, as shown in the image below.
please guide me.
These are the html codes:
.tours_description_book {
border: 1px solid #d2ac67;
overflow: hidden;
border-radius: 9px;
}
.tours_description_book .title {
background: #0c1e3a;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 15px 0;
margin-bottom: 15px;
}
.tours_description_book > ul {
display: grid;
grid: auto / auto;
padding: 15px 35px;
}
.tours_description_book > ul > li > ul {
display: grid;
grid: auto / 50% 50%;
padding-left: 20px;
}
.tours_description_book > ul > li {
border-bottom: 1px solid #dcdddf;
font-weight: 600;
font-size: 16px;
padding: 15px 0;
color: #0c1e3a;
}
.tours_description_book > ul > li > ul > li:last-of-type {
text-align: center;
}
.tours_description_book > ul > li:first-of-type > ul > li:last-of-type {
text-align: left;
}
.tours_description_book > ul > li:first-of-type {
font-weight: 400;
}
.tours_description_book > ul > li:last-of-type {
border: 0;
}
.tours_description .tours_description_book a {
display: block;
width: calc(100% - 60px);
margin: 0 auto 50px;
background: #0c1e3a;
text-align: center;
color: #fff;
border-radius: 9px;
font-weight: 600;
line-height: 60px;
}
.tours_description .tours_description_book a:hover {
background: #d2ac67;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #d2ac67;
display: inline-flex;
border-radius: 5px;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before {
display: inline-block;
content: '-';
color: #d2ac67;
font-size: 18px;
}
.number-input button.plus:before {
content: '+';
}
.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: solid #d2ac67;
border-width: 0 1px;
font-size: 16px;
height: 3rem;
font-weight: 600;
text-align: center;
}
<div class="tours_description_book wrapper">
<div class="title wrapper">- Booking -</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button onclick="this.parentNode.querySelector('.Adults_N').stepDown()" ></button>
<input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
<button onclick="this.parentNode.querySelector('.Adults_N').stepUp()" class="plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button onclick="this.parentNode.querySelector('.Children_N').stepDown()" ></button>
<input class="quantity Children_N" min="0" name="Children" value="0" type="number">
<button onclick="this.parentNode.querySelector('.Children_N').stepUp()" class="plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free amount">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free amount">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total">0$</li>
</ul>
</li>
</ul>
‌BOOK NOW
</div>
The details I think are clear in the picture. But this is how we enter the number of adults and children, and finally with jQuery we have to add the prices and show the final price.
These are html and css code. Unfortunately I do not have much control over jQuery to close the project.

I removed the inline onclick events from your buttons and added them back in as a programatic event listener. That way we can tie into these events to populate the prices. Rather than explain line by line, take a look and ask any questions you might have about how this works.
let adultPrice = 19.99, childPrice = 11.99;
window.addEventListener('DOMContentLoaded', () => {
let buttons = document.querySelectorAll('.step-button');
buttons.forEach(el => {
el.addEventListener('click', e => {
let inc = -1;
if (e.target.classList.contains('plus')) inc = 1;
let input = e.target.closest('div').querySelector('input');
input.value = Math.max((+input.value + inc), 0);
calcAmounts()
})
})
calcAmounts()
})
function calcAmounts() {
document.querySelector('.adult-subtotal').innerHTML = '$' + (+document.querySelector('.Adults_N').value * adultPrice).toFixed(2);
document.querySelector('.child-subtotal').innerHTML = '$' + (+document.querySelector('.Children_N').value * childPrice).toFixed(2);
document.querySelector('.total').innerHTML = '$' + (+document.querySelector('.adult-subtotal').innerHTML.replace(/[^\d.-]/g, '') + +document.querySelector('.child-subtotal').innerHTML.replace(/[^\d.-]/g, '')).toFixed(2);
}
.tours_description_book {
border: 1px solid #d2ac67;
overflow: hidden;
border-radius: 9px;
}
.tours_description_book .title {
background: #0c1e3a;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 15px 0;
margin-bottom: 15px;
}
.tours_description_book>ul {
display: grid;
grid: auto / auto;
padding: 15px 35px;
}
.tours_description_book>ul>li>ul {
display: grid;
grid: auto / 50% 50%;
padding-left: 20px;
}
.tours_description_book>ul>li {
border-bottom: 1px solid #dcdddf;
font-weight: 600;
font-size: 16px;
padding: 15px 0;
color: #0c1e3a;
}
.tours_description_book>ul>li>ul>li:last-of-type {
text-align: center;
}
.tours_description_book>ul>li:first-of-type>ul>li:last-of-type {
text-align: left;
}
.tours_description_book>ul>li:first-of-type {
font-weight: 400;
}
.tours_description_book>ul>li:last-of-type {
border: 0;
}
.tours_description .tours_description_book a {
display: block;
width: calc(100% - 60px);
margin: 0 auto 50px;
background: #0c1e3a;
text-align: center;
color: #fff;
border-radius: 9px;
font-weight: 600;
line-height: 60px;
}
.tours_description .tours_description_book a:hover {
background: #d2ac67;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #d2ac67;
display: inline-flex;
border-radius: 5px;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before {
display: inline-block;
content: '-';
color: #d2ac67;
font-size: 18px;
}
.number-input button.plus:before {
content: '+';
}
.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: solid #d2ac67;
border-width: 0 1px;
font-size: 16px;
height: 3rem;
font-weight: 600;
text-align: center;
}
<div class="tours_description_book wrapper">
<div class="title wrapper">- Booking -</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button class="step-button"></button>
<input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
<button class="step-button plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button class="step-button"></button>
<input class="quantity Children_N" min="0" name="Children" value="0" type="number">
<button class="step-button plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free adult-subtotal amount">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free child-subtotal amount">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total">0$</li>
</ul>
</li>
</ul>
‌BOOK NOW
</div>

You must use id's instead of a class where you want to make your element to be accessible uniquely ! .... Also instead of inline js use functions it will make your code much cleaner ...
Since you didn't had any js so i wrote it accordingly..
See =>
HTML
<div class="title wrapper">
- Booking -
</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button onclick="dec(this)" class="minus"></button>
<input class="quantity Adults_N" min="0" name="Adults" id="Adults" value="1" type="number">
<button onclick="inc(this)" class="plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button onclick="dec(this)" class="minus"></button>
<input class="quantity Children_N" min="0" name="Children" id="Children" value="0" type="number">
<button onclick="inc(this)" class="plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free amount" id="Adult_display">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free amount" id="Child_display">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total"><span id="total">0</span>$</li>
</ul>
</li>
</ul>
‌BOOK NOW
JS
const adult_price = 100;
const child_price = 20;
const total = document.querySelector('#total')
const adult_count = document.querySelector("#Adults");
const child_count = document.querySelector("#Children");
const child_display = document.querySelector("#Child_display");
const adult_display = document.querySelector("#Adult_display");
adult_display.innerText = adult_count.value;
child_display.innerText = child_count.value;
// Handling inc or dec
function inc(element) {
element = element.parentElement.querySelector("input");
element.stepUp()
count_change(element)
}
function dec(element) {
element = element.parentElement.querySelector("input")
element.stepDown();
count_change(element)
}
// Adding listneres for change in values
adult_count.addEventListener("change", function (element) {
element = element.target;
count_change(element);
});
child_count.addEventListener('change', function (element) {
element = element.target;
count_change(element);
});
// Upadte UI and calculate final price
function count_change(ele) {
if (ele === adult_count) {
adult_display.innerText = adult_count.value
} else if (ele === child_count) {
child_display.innerText = child_count.value
}
calculate_price()
}
function calculate_price() {
let total_price = parseInt(total.innerText)
if (parseInt(adult_count.value) !== 0 && adult_count.value !== "") {
total_price = parseInt(adult_count.value) * adult_price + parseInt(child_count.value) * child_price;
adult_display.innerText = parseInt(adult_count.value) * adult_price + "$";
}
if (parseInt(child_count.value) !== 0 && child_count.value !== "") {
total_price = parseInt(adult_count.value) * adult_price + parseInt(child_count.value) * child_price;
child_display.innerText = parseInt(child_count.value) * child_price + "$";
}
total.innerText = total_price;
}
calculate_price()

Why do my total cart price not compute correctly?

I am doing a school project of designing an ecommerce webpage. I am new to this and is facing some problem at the shopping cart check out portion. Would really appreciate any help from you guys ! :)
There's already an item (let's call it item A) in the cart every time the webpage reload. I am able to get a correct total price computation for every increasing quantity of item A in the cart. However, when I add another item into the cart and increase the quantity of the newly added item , the total price won't update. I also noticed that when I increase the quantity of item A when there is other items in the cart. The total price = (quantity * total amount) in the cart instead of computing just the price of item.
Here's the js, css and html code:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-1');
console.log(removeCartItemButtons)
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('btn-2')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.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
console.log(title, price, imageSrc)
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
function addItemToCart(title, price, imageSrc) {
var cartRow = document.createElement('div')
cartRow.classList.add()
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already been added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-items">
<table class="cart-row">
<tr>
<td>
<div class="cart-info">
<img class="cart-item-image"src="${imageSrc}" >
<div>
<p class="cart-item-title">${title}</p>
<small>Price: ${price}</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td
class="cart-price">${price}
</td >
</tr>
</table>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-1')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input')[0]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var price = parseFloat(priceElement.innerHTML.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = (Math.round(total * 100) / 100).toFixed(2)
document.getElementsByClassName('cart-total-price')[0].innerHTML = '$' + total
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
a {
text-decoration: none;
color: black;
}
p {
color: black;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 50px;
padding-right: 50px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 400px;
}
.col-2 img {
max-width: 100%;
padding: 50px 0;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 18px;
margin: 30px 0;
border-radius: 30px;
cursor: pointer;
outline: none;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 100%;
}
.small-container {
max-width: 1080px;
margin: auto;
padding-left: 50px;
padding-right: 50px;
}
.title {
text-align: center;
margin: 0 auto 30px;
position: relative;
line-height: 50px;
color: black
}
.title::after {
content: '';
background: black;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.col-4:hover {
transform: translateY(-5px);
}
.btn-2 {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 18px;
margin: 30px 0;
border-radius: 30px;
cursor: pointer;
border: none;
outline: none;
}
/*------footer-----*/
.footer {
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 40px 0 20px;
}
.footer-col-1 {
min-width: 250px;
margin-bottom: 10px;
flex-basis: 30%;
flex: 1;
text-align: center;
}
.footer-col-1 img {
width: 200px;
margin-bottom: 20px;
}
.footer p {
color: #8a8a8a;
}
/*------cart-----*/
.cart-page {
margin: 80px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
.cart-info {
display: flex;
flex-wrap: nowrap;
}
th {
text-align: justify;
padding: 5px;
color: #fff;
background: #ff523b;
font-weight: normal;
}
td {
padding: 10px 5px;
width: 1px;
}
td input {
width: 45px;
height: 30px;
padding: 5px;
border-radius: 30px;
text-align: right;
}
td a {
color: #ff523b;
font-size: 10px;
}
td img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.btn-1 {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 10px;
margin: 3px 0;
border-radius: 30px;
font-size: 10px;
cursor: pointer;
border: none;
outline: none;
}
.total-price {
display: flex;
justify-content: flex-end;
}
.total-price table {
border-top: 3px solid #ff523b;
width: 100%;
max-width: 350px;
margin: 30px 0;
}
td:last-child {
text-align: right;
}
th:last-child {
text-align: right;
}
.btn-purchase {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 40px;
margin: 30px 0;
border-radius: 30px;
outline: none;
border: none;
cursor: pointer;
}
.btn-purchase:hover {
transform: translateY(-3px);
}
.btn-1:hover {
transform: translateY(-1px);
}
.cart-item {
width: 60%;
}
/*------------ account page --------------*/
.account-page {
padding: 50px 0;
}
.form-container {
background: #fff;
width: 300px;
height: 300px;
position: relative;
text-align: center;
padding: 20px 0;
margin: auto;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-container span {
font-weight: bold;
padding: 0 10px;
color: #555;
cursor: pointer;
width: 100px;
display: inline-block;
}
.form-btn {
display: inline-block;
}
.form-container form {
max-width: 300px;
padding: 0 20px;
position: absolute;
top: 130;
transition: transform 1s;
}
form input {
width: 100%;
height: 30px;
margin: 10px 0;
padding: 0 10px;
border: 1px solid #ccc;
}
form .btn {
width: 100%;
border: none;
cursor: pointer;
margin: 10px 0;
}
form .btn:focus {
outline: none;
}
#LoginForm {
left: -300px;
}
#RegForm {
left: 0;
}
form a {
font-size: 12px;
}
#Indicator {
width: 100px;
border: none;
background: #ff523b;
margin-top: 8px;
height: 3px;
transform: translateX(100px);
transition: transform 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internet Security PBIL</title>
<link rel="stylesheet" href="style.css">
<script src="store.js" async></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="yeet/yeet.jpg" width="80px">
</div>
<nav>
<ul>
<li>Home</li>
<li>Account</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-2">
<h1>Good Sport <br>Good game!</h1>
<p>Come buy our good items now!</p>
Explore Now
</div>
<div class="col-2">
<img src="yeet/image1.png">
</div>
</div>
</div>
<!-------- products -------->
<div class="small-container">
<h2 class="title">Shirt</h2>
<div class="row">
<div class="col-4">
<img class="shop-item-image" src="yeet/product-1.jpg">
<h4 class="shop-item-title">Red</h4>
<p class="shop-item-price">$10.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-2.jpg">
<h4 class="shop-item-title">Blue</h4>
<p class="shop-item-price">$20.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-3.jpg">
<h4 class="shop-item-title">Green</h4>
<p class="shop-item-price">$30.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-4.jpg">
<h4 class="shop-item-title">Yellow</h4>
<p class="shop-item-price">$40.00</p>
<button class="btn-2">Add to cart</button>
</div>
</div>
<h2 class="title">Shorts</h2>
<div class="row">
<div class="col-4">
<img class="shop-item-image" src="yeet/product-5.jpg">
<h4 class="shop-item-title">1 printed t-shirt</h4>
<p class="shop-item-price">$50.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-6.jpg">
<h4 class="shop-item-title">2 printed t-shirt</h4>
<p class="shop-item-price">$60.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-7.jpg">
<h4 class="shop-item-title">3 printed t-shirt</h4>
<p class="shop-item-price">$70.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-8.jpg">
<h4 class="shop-item-title">4 printed t-shirt</h4>
<p class="shop-item-price">$80.00</p>
<button class="btn-2">Add to cart</button>
</div>
</div>
</div>
<!----- cart items details ----->
<section class="small-container cart-page">
<h2 class="title">Cart</h2>
<table>
<tr>
<th class="cart-item">Product</th>
<th class="cart-qunatity">Quantity</th>
<th class="cart-price">Subtotal</th>
</tr>
</table>
<div class="cart-items">
<table class="cart-row">
<tr>
<td>
<div class="cart-info">
<img class="cart-item-image" src="yeet/buy-1.jpg">
<div>
<p class="cart-item-title">Red Printed Tshirt</p>
<small>Price: $50.00</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td><span class="cart-price">$50.10</span>
</td>
</tr>
</table>
</div>
<!--- <table>
<tr class="cart-row">
<td>
<div class="cart-info">
<img class="cart-item-image" src="yeet/buy-2.jpg" >
<div>
<p class="cart-item-title">Red Printed Tshirt</p>
<small>Price: $80.0</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td class="cart-price">$80.50</td>
</tr>
</table>
</div> --->
<div class="total-price">
<table>
<tr>
<td class="cart-total-title">Total</td>
<td class="cart-total-price">$50.50</td>
</tr>
<tr>
<td>
<button class="btn-purchase" type="button">Purchase</button>
</td>
</tr>
</table>
</div>
</section>
<!-----footer----->
<div class="footer">
<div class="container">
<div class="footer-col-1">
<p>Products brought to you by Yeet!</p>
<img src="yeet/yeet.jpg">
</div>
</div>
</div>
</body>
</html>
Thank you guys for your help!
(ps: please ignore the naming of my items as is not finalize yet haha,cheers!)

Ah, it was hard to see, so I made an answer of it:
you used once cartItemContainer instead of cartRow, so you couldn't understand my comment... :-)
var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input') [0] <- should be cartRow
var priceElement = cartRow.getElementsByClassName('cart-price')[0]

Change background colour of an active div

I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

if has no child how to not toggle?

Hi I develop checkbox and I have some issue.if my li parents has no ul child it musn't be toggle. I'm talking about red arrows which is the left of li element.
I got solved problem thanks to #Arun P Johny just one more thing left I have to do is when clicked label checkbox musn't be checked only thoose which has got ul child
see my codeson codepen
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.downCheck:before
{
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
 
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
jquery codes
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
$(".new-checkbox ul li > * li:has(ul)").addClass("downCheck");
});

You can use the has-checked class to style the element, there is no need to have a new class
$(document).ready(function() {
$('.new-checkbox li:has(ul)').addClass('parent');
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.parent.has-checked:before {
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- new checkbox-->

Replace Code
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li:has(ul)").stop().toggleClass("downCheck");
});
From
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
Codepen Demo