We Keep Coding

my carousel items are gone on the webpage but it worked before adding some new things

I made a carousel with bootstrap (v5) and modified it to be 3 besides each other on large screen and only one on small screens. It worked just fine, but after adding some javascript and google analytics and coockies, the carousel items dissapear on small screens.
html part of the carousel:
<section id="diensten">
<h2>diensten</h2>
<div id="carouselExample" class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webhosting.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">hosting</p>
<div>
<button onclick="openHosting()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webdesign.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">webdesign</p>
<div>
<button onclick="openWebdesign()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/photography.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">fotografie</p>
<div>
<button onclick="openFotografie()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/domain_name.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">domein naam</p>
<div>
<button onclick="openDomeinNaam()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/seo.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">SEO</p>
<div>
<button onclick="openSeo()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/undraw_maintenance_re_59vn.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">onderhoud</p>
<div>
<button onclick="openOnderhoud()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
css part of the carousel (for small screens):
/* styling for the 'diensten' section */
h2 {
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 50px 0;
}
.card {
margin: 0 1em;
border: none;
max-width: 400px;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.carousel-inner {
padding: 1em;
}
.img-wrapper {
max-width: 100%;
height: 65vw;
display: flex;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 20px;
font-weight: 100;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.carousel-control-prev, .carousel-control-next {
width: 5vh;
height: 5vh;
background-color: #0D283C;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.card-body div {
text-align: center;
}
.extra-btn {
border: none;
border-radius: 100%;
padding: 6px 10px;
background-color: #0D283C;
color: white;
margin: auto;
transition: 0.2s;
}
.extra-btn:hover {
background-color: #3461AB;
}
.extra-btn span {
display: none;
}
/* extra info screens */
.overlay {
position: fixed;
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.extra-info-card {
padding: 10px;
text-align: center;
border-radius: 30px;
margin: auto;
max-width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra-info-card>div {
position: relative;
}
.close-btn {
border: none;
border-radius: 100%;
padding: 3px 5px;
background-color: #0D283C;
color: white;
font-size: 2px;
transition: .2s;
}
.close-btn:hover {
background-color: #3461AB;
}
.close-btn span {
display: none;
}
.extra-info-card h1 {
text-transform: uppercase;
margin: 0;
}
.extra-info-card p {
margin: 15px auto;
max-width: 90%;
font-size: 14px;
font-weight: 100;
}
.extra-info-card img {
display: none;
margin: auto;
max-width: 30%;
}
.hidden {
display: none;
transition: .2s;
}
css for the bigger screens
#media screen and (min-width: 576px) {
.carousel-inner {
display: flex;
}
.carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100%/3);
}
.img-wrapper {
height: 23vw;
}
.close-btn {
padding: 6px 10px;
font-size: 10px;
}
}
#media screen and (min-width: 768px) {
h2 {
font-size: 25px;
}
header section:first-child img {
width: 100px;
}
.nav-item {
font-size: 30px;
}
.text-part {
text-align: left;
}
header section:last-child img {
display: block;
}
section:nth-child(2) h1 {
font-size: 24px;
}
section:nth-child(2) a {
font-size: 15px;
}
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 90%;
margin: 150px auto;
}
#over-ons h2 {
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
border-left: 3px solid #0D283C;
}
#over-ons p {
text-align: left;
font-size: 16px;
}
#over-ons img {
display: block;
}
#proces img {
display: block;
width: 75%;
margin: auto;
}
#landing {
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
.extra-info-card img {
display: block;
}
#proces h3 {
font-size: 18px;
}
#proces p {
font-size: 16px;
}
}
#media screen and (min-width:992px) {
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 992px;
margin: 150px auto;
}
section:nth-child(2) h1 {
font-size: 30px;
}
section:nth-child(2) a {
font-size: 20px;
}
}
The 2 different javascript files (make it 3 items & extra info button functionality)
const multiItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia("(min-width:576px)").matches) {
const carousel = new bootstrap.Carousel(multiItemCarousel, {
interval: false
})
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();
var scrollPosition = 0;
$('.carousel-control-next').on('click', function () {
if (scrollPosition < (carouselWidth - (cardWidth * 4))) {
scrollPosition = scrollPosition + cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
$('.carousel-control-prev').on('click', function () {
if (scrollPosition > 0) {
scrollPosition = scrollPosition - cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
};
function openHosting() {
console.log("open")
var hosting = document.getElementById("hosting");
hosting.classList.remove("hidden")
}
function openWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.remove("hidden")
}
function openFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.remove("hidden")
}
function openDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.remove("hidden")
}
function openSeo() {
var seo = document.getElementById("seo");
seo.classList.remove("hidden")
}
function openOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.remove("hidden")
}
//alle functies voor het sluiten van de verschillende extra info secties
function closeHosting() {
console.log("close")
var hosting = document.getElementById("hosting")
hosting.classList.add("hidden")
}
function closeWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.add("hidden")
}
function closeFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.add("hidden")
}
function closeDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.add("hidden")
}
function closeSeo() {
var seo = document.getElementById("seo");
seo.classList.add("hidden")
}
function closeOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.add("hidden")
}

Problem with displaying number in inner text

newbie here...
I am working on some simple project where I am trying to simulate bank app.
Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.
Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.
Here it is javascript file, if you can see from this why I get error.
Also here it is html and css if you don't understand what I am talking about.
////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;
allcards.forEach((kartica) => {
let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
novacNaKartici = parseInt(novacNaKartici);
totalMoneyAccount += novacNaKartici;
totalMoney.innerText = ` ${replika2} $`;
});
//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
function updateProfile(totalMoneyAccount) {
totalMoney.innerHTML = totalMoneyAccount;
}
<!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" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="style.css" />
<title>Bank app</title>
</head>
<body>
<div class="container">
<div class="profile">
<div class="header">
<span class="material-symbols-outlined"> notifications </span>
<span class="material-symbols-outlined"> search </span>
</div>
<div class="person">
<img src="/img/cost1.jpg" alt="" />
<p>Random user</p>
<span class="totalMoney" style="font-size: 20px;"></span>
</div>
<div class="menu">
<div class="account flex">
<span class="material-symbols-outlined"> manage_accounts </span>
<p>Accounts</p>
</div>
<div class="transactions flex">
<span class="material-symbols-outlined"> receipt_long </span>
<p>Transactions</p>
</div>
<div class="bonus flex">
<span class="material-symbols-outlined"> star </span>
<p>Bonus</p>
</div>
<div class="invest flex">
<span class="material-symbols-outlined"> trending_up </span>
<p>Investments</p>
</div>
<div class="logOut flex">
<span class="material-symbols-outlined"> logout </span>
<p>Log Out</p>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="naslov">
<p>Cards</p>
<span class="material-symbols-outlined">
add_circle
</span>
</div>
<div class="allCards">
<div class="cards changeJustify">
<div class="singleCard">
<img src="/img/visa.png" alt="" class="changeImg"/>
</div>
<div class="opis">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance">
<span class="material-symbols-outlined changeSpan dots">
more_vert
</span>
<span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
</div>
</div>
<div class="cards changeJustify">
<div class="singleCard ">
<img src="/img/american.jpg" alt="" class="changeImg"/>
</div>
<div class="opis ">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance ">
<span class="material-symbols-outlined changeSpan dots" >
more_vert
</span>
<span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
</div>
</div>
</div>
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transactions</p>
<div class="transakcije">
</div>
</div>
</div>
<div class="right">
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transfer money</p>
<div class="transfer">
<label for="recivier">Transfer to</label>
<input type="text" placeholder="antonio3101" name="recivier">
<label for="amount">Amount</label>
<input type="number" placeholder="$300..." name="amount">
<button class="sendBtn">Send</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
background-color: #f1f2f6;
}
.profile {
height: 100vh;
width: 20%;
background-color: #1d1c57;
display: flex;
flex-direction: column;
color: white;
}
.profile .header {
display: flex;
padding: 30px;
align-items: center;
justify-content: space-between;
color: #7979a6;
}
.profile .header span {
font-size: 26px;
}
.profile .header span:hover {
color: white;
}
.profile .person {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.profile .person img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile .person p {
font-size: 26px;
color: #c6c5d8;
}
.profile .menu {
margin-top: 100px;
padding: 20px;
background-color: #262467;
border-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
position: relative;
font-size: 22px;
color: #7c7eaa;
}
.profile .flex {
margin-left: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.profile .flex:hover {
margin-left: 40px;
color: white;
transition: ease-in-out;
}
.logOut {
position: absolute;
bottom: 50px;
}
/*-------------------------- KARTICE ----------------------------------------- */
.main .naslov {
color: grey;
font-size: 30px;
font-weight: bold;
}
.naslov {
display: flex;
align-items: center;
justify-content: space-between;
}
.naslov span {
font-size: 32px;
}
.naslov span:hover {
color: black;
}
.main .left {
display: flex;
flex-direction: column;
margin-left: 30px;
}
.main .left .cards {
background-color: #ffffff;
padding: 20px;
display: flex;
padding: 20px;
border-radius: 20px;
}
.cards {
margin-top: 10px;
}
.cards .singleCard {
display: flex;
width: 100%;
}
.allCards {
display: flex;
flex-direction: column;
}
.cards .singleCard img {
width: 250px;
padding-right: 10px;
}
.cards .opis p {
margin: 0;
padding: 0;
margin-left: 10px;
}
.cards .opis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.cards .balance {
margin-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/*------------------------------- CHANGE CARD -------------------------------- */
.changeImg {
height: 50px;
object-fit: cover;
}
.changeSpan {
display: none;
}
.changeJustify {
display: flex;
align-items: center;
}
.changeBalance {
display: none;
}
/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
background-color: white;
display: flex;
flex-direction: column;
padding: 10px;
}
.single-transaction {
display: flex;
margin-left: 10px;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid grey;
}
.single-transaction img {
height: 60px;
width: 60px;
border-radius: 50%;
object-fit: cover;
}
.single-transaction .destination {
font-size: 16px;
color: rgb(73, 73, 73);
font-weight: bold;
}
.single-transaction .amount {
color: rgb(30, 149, 30);
font-weight: bold;
font-size: 16px;
}
.single-transaction:last-child {
border-bottom: 0;
}
/*-------------------------- RIGHT SECTIONS ----------------------------------------- */
/*-------------------------- TRANSFER MONEY ----------------------------------------- */
.right {
display: flex;
flex-direction: column;
margin-left: 100px;
}
.right .transfer {
background-color: #1d1c57;
padding: 50px 20px;
border-radius: 10px;
margin-left: 10px;
margin-right: 20px;
}
.right .transfer input {
height: 30px;
font: 24px;
margin-left: 10px;
}
.right .transfer label {
margin-left: 20px;
color: white;
}
.right .transfer button {
padding: 10px 15px;
color: black;
background-color: white;
border-radius: 5px;
border: 0;
margin-left: 20px;
margin-right: 20px;
}

You are overwriting your amount variable (which points to an input element) with the value inputted into said input.
Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction. This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN.
Change this code:
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
to something like this:
sendMoneyBtn.addEventListener(`click`, () => {
const amountValue = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amountValue;
updateProfile(totalMoneyAccount);
});
Credit to #JohnnyMopp for noticing it first.

Slider in Apple store style

I know I would show some effort in this but I have no idea... I'm trying to make a slider like the one in the store section of Apple website.
https://www.apple.com/store
The slider has to be aligned to the left side of the grid when the page is loaded and then it has to go full width when the user scrolls it. I can't find any solution. Can someone point me to the right direction?

there is a simple solution in this codepen:
https://codepen.io/ezadoo/pen/VwWEZBZ
var swiper = new Swiper(".snapslider-overflow", {
cssMode: true,
speed: 1000,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
//wrapperClass: "snapslider-scroll",
//slideClass: "snapslider-card",
slidesPerView: "auto",
mousewheel: true,
keyboard: true,
});
#import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap");
$mobile-break: 668px;
$desktop-break: 1024px;
:root {
--feat-leftpadding: 5rem;
#media only screen and (min-width: $desktop-break) {
//--feat-leftpadding: 6.5rem;
}
}
body {
margin: 0;
padding: 0;
background-color: #f5f5f7;
}
.ezd-feature-headline {
padding-left: var(--feat-leftpadding);
max-width: 30rem;
font-family: "IBM Plex Sans", sans-serif;
line-height: 1.15em;
letter-spacing: -0.03em;
font-size: 1.25rem;
#media only screen and (min-width: $desktop-break) {
font-size: 1.75rem;
max-width: 45rem;
}
.headline-primary {
color: rgba(0, 0, 0, 1);
}
.headline-secondary {
color: rgba(128, 128, 128, 1);
}
&.has-big {
font-size: 2rem;
#media only screen and (min-width: $desktop-break) {
font-size: 3rem;
}
}
}
.snapslider-card {
font-size: 1.25rem;
display: block;
// background-color: red;
width: 14.5em;
height: 18.5em;
//border: 1px solid black;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.75em;
//float: left;
flex-grow: 0;
flex-shrink: 0;
scroll-snap-align: start;
#media only screen and (min-width: $desktop-break) {
font-size: 1.75rem;
}
&:nth-child(even) {
// background-color: blue;
}
&:first-child {
padding-left: var(--feat-leftpadding);
}
&:last-child {
//padding-right: 0;
}
//box-sizing: border-box;
.card-content {
border-radius: 0.75em;
background: #ffffff;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
}
.ezd-snapslider {
margin-bottom: 2rem;
position: relative;
&::-webkit-scrollbar {
//display: none;
}
.snapslider-overflow {
//padding-left: 6rem;
//width: calc(100% - 6rem);
//overflow: visible;
&::-webkit-scrollbar {
//display: none;
}
}
.snapslider-scroll {
display: flex;
flex-wrap: nowrap;
height: auto;
width: auto;
//padding-left: 6rem;
//overflow: visible;
overflow-x: scroll;
scroll-snap-type: x mandatory;
//scroll-padding: 0 var(--feat-leftpadding);
scroll-padding: 0 5rem;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<div class="ezd-content">
<h2 class="ezd-feature-headline has-big">
<span class="headline-primary">Slider.</span>
<span class="headline-secondary">This is for demonstration purposes, to show the need of scroll-padding.</span>
</h2>
<h3 class="ezd-feature-headline">
<span class="headline-primary">Another Line.</span>
<span class="headline-secondary">Simply here for more text.</span>
</h3>
<div class="ezd-snapslider">
<div class="snapslider-wrapper">
<div class="snapslider-overflow">
<div class="snapslider-scroll swiper-wrapper">
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Change CSS of nth class in Jquery or Javascript

I am trying to change the text color of the 5th infobox (class) in my code below. The text color changes but for all the infoboxes.
//INFOBOX5
var json_data = {"headers":["Platform","Value1","value1","valueP1","valueP2"],"rows":[["platform2","xxx",404.07000000000005,1634,6364],["platform5","xxx",404.07000000000005,1634,6364],["platform1","xxx",352.8,1634,6364],["platform3","xxx",352.8,1634,6364],
["platform3","xxx",352.8,1634,6364],["platform4","xxx",352.8,1634,6364]]};
var platform_data = json_data.rows;
var platform1_element = document.getElementById("platform1");
var platform5_element = document.getElementById("platform5");
var platform6_element = document.getElementById("platform6");
var platform2_element = document.getElementById("platform2");
var platform3_element = document.getElementById("platform3");
var platform4_element = document.getElementById("platform4");
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
var platforms = [];
for (var i in platform_data) {
if (platform_data[i][0] != null){
platforms[i] = platform_data[i][0].toLowerCase();
}
}
var unique_platforms = platforms.filter( onlyUnique );
var target_width = 100/(unique_platforms.length-2);
var width_str=target_width+"%";
platform1_element.classList.add("hidden");
platform5_element.classList.add("hidden");
platform6_element.classList.add("hidden");
platform3_element.classList.add("hidden");
platform2_element.classList.add("hidden");
platform4_element.classList.add("hidden");
var total_value1 = 0;
var total_value2 = 0;
var total_display_value1 = 0;
var total_video_value1 = 0;
var total_mixed_value1 = 0;
var total_other_value1 = 0;
var total_display_value2 = 0;
var total_video_value2 = 0;
var total_mixed_value2 = 0;
var value2_numbers = [];
for (var i in unique_platforms) {
var platform_name = unique_platforms[i].toLowerCase();
var display_value1_total = 0;
var display_value2_total = 0;
var video_value1_total = 0;
var video_value2_total = 0;
var mixed_value1_total = 0;
var mixed_value2_total = 0;
var other_value1_total = 0;
for (var x in platform_data){
if (platform_data[x][0] != null){
if(platform_data[x][0].toLowerCase() == platform_name){
switch(platform_data[x][1]) {
case "display":
// Red Dot
display_value1_total = display_value1_total + platform_data[x][2];
total_value1 = total_value1 + display_value1_total;
break;
case "video":
video_value1_total = video_value1_total + platform_data[x][2];
total_value1 = total_value1 + video_value1_total;
break;
case "mixed":
mixed_value1_total = mixed_value1_total + platform_data[x][2];
total_value1 = total_value1 + mixed_value1_total;
break;
case "Other":
other_value1_total = other_value1_total + platform_data[x][2];
total_value1 = total_value1 + other_value1_total;
break;
default:
doNothing = "";
}
}
}else {
value2_numbers = platform_data[x];
}
}
var platform_value1 = display_value1_total + video_value1_total + mixed_value1_total + other_value1_total;
var generic_element = document.getElementById(platform_name);
var element_value1_name = platform_name+"_value1";
var fl_value1 = parseFloat(platform_value1).toFixed(0);
var curr_flag = "€"+formatNumber(fl_value1);
document.getElementById(element_value1_name).innerHTML = curr_flag;
total_display_value1 = total_display_value1 + display_value1_total;
total_video_value1 = total_video_value1 + video_value1_total;
total_mixed_value1 = total_mixed_value1 + mixed_value1_total;
}
var total_value1_string = "<h1>€" + formatNumber(Number(total_value1).toFixed(0)) + "</h1>";
//document.getElementById("total_value1").innerHTML = total_value1_string;
if (value2_numbers.length == 0){
value2_numbers = platform_data[0];
}
var fl_value2 = 0;
var curr_flag_bud = '';
var element_value2_name = '';
for (var i in json_data.headers){
switch(json_data.headers[i]) {
case "valueP1":
element_value2_name = "platform1_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€"+formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
case "valueP2":
element_value2_name = "platform2_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€" +formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
case "valueP1":
element_value2_name = "platform1_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€" +formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
default:
}
}
var statBox = Array.from(document.querySelectorAll('.infobox'));
var element_id;
var parentBoxlist = Array.from(document.querySelectorAll('.parentbox'));
var channel_value1_check = 0;
var value1_channels = [];
// if (total_mixed_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[0] = 'mixed';};
// if (total_video_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[1] = 'video';};
// if (total_display_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[2] = 'display';};
statBox.forEach(function(box) {
switch(unique_platforms.length) {
case 1:
// 1 box
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox1');
box.classList.remove('hidden');
}
break;
case 2:
// 2 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox2');
box.classList.remove('hidden');
}
break;
case 3:
// 3 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox3');
box.classList.remove('hidden');
}
break;
case 4:
// 4 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox4');
box.classList.remove('hidden');
}
break;
case 5:
// 5 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox5');
box.classList.remove('hidden');
}
break;
default:
}
});
$(".boxbox:nth-of-type(1)").css("color", "#fff");
#import url('https://fonts.googleapis.com/css?family=Roboto');
body{
color: #fff;
font-family: Roboto;
margin:0;
overflow:hidden;
}
h1{
font-size: 1.2vw;
}
h3{
font-size: 1.1vw!important;
font-weight: 100;
margin: 0;
padding: 5px;
}
.redSq{
background-color: #ff000a;
width: 117px;
height: 241px;
float:left;
}
.row {
display: table;
width: 99.8%;
height: 180px;
color: #454545;
background-color:#dee9f3;
//border: solid 1px #454545;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
margin-bottom: 10px;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
p{
font-size: 1.2vw;
}
.boxes{
padding-top: 40px;
padding-left: 30px;
padding-right: 5%;
min-width: 200px;
float:left;
display: inline-block;
}
#line{
border-bottom: solid 1px #CCC;
margin-top: 0px;
padding-top: 15px;
}
.infobox {
float:left;
margin: 0;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: #454545;
}
.infobox1 {
float:left;
min-height:150px;
min-width: 100%;
margin: 0;
}
.infobox2 {
float:left;
min-height:150px;
min-width: 49%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox3 {
float:left;
min-height:150px;
min-width: 32.33%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox4 {
float:left;
//min-height:150px;
min-width: 23.9%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox5 {
float:left;
min-height:150px;
min-width: 32.33%;
margin: 0 0.5% 0.7%;
//padding: 18px 0;
}
div.leftBox{
float:left;
width:60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
div.rightBox{
float:left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
.infocontentheader {
//text-align: center;
line-height: 2.8;
//color: #fff;
vertical-align: middle;
height: 100%;
float:left;
width:25%;
}
.infocontent{
text-align: center;
color: #fff;
width: 50%;
float: left;
}
div#platform1.infocontentheader{
background-color: #3c5999;
}
div#platform1.infobox img{
display: block;
margin: 0 auto 0 auto;
}
p#sTitle {
font-weight: 900;
font-size: 1.5vw;
}
p#bTitle {
//font-weight: 900;
font-size: 1.2vw;
}
p#platform1_value1, p#platform5_value1, p#platform4_value1 ,p#platform3_value1,
p#platform2_value1, p#twitter_value1 {
font-weight: 900;
font-size: 1.3em;
margin: 10px 0 0 20px;
}
p#platform1_budget, p#platform5_budget, p#platform4_budget, p#platform3_budget,
p#platform2_budget, p#twitter_budget{
font-size: 1.2em;
margin: 10px 0 0 20px;
}
div#twitter.infocontentheader{
background-color: #1da1f2;
}
div#twitter.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform3.infocontentheader{
background-color: #a15aa0;
}
div#display.parentbox{
background-color: #b3b3b3;
color: #fff;
}
div#video.parentbox{
background-color: #999999;
color: #fff;
}
div#mixed.parentbox{
background-color: #c1c1c1;
color: #fff;
}
#platform3 div.infocontentheader{
color: #fff;
}
div#platform3.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform3_value.infocontent{
color: #000;
}
div#platform5.infocontentheader{
background-color: #ff0102;
}
div#platform5.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform4.infocontentheader{
background-color: #cac9c2;
}
div#platform4.infobox img{
display: block;
margin: 10% auto 0 auto;
}
div#platform2.infobox{
background-color: #fff;
}
div#platform2.infobox img{
display: block;
margin: 10% auto 0 auto;
}
.hidden{
display:none;
}
#parent_div_1{
width:50%;
min-height: 150px;
background-color: #757476;
margin-right:0px;
float:left;
}
#parent_div_2{
width:50%;
min-height: 150px;
background-color: #8D8D8D;
margin-right:0px;
float:left;
}
.parentbox{
width:33.33%;
min-height: 150px;
/*background-color: #8D8D8D;*/
margin-right:0px;
float:left;
}
.parentbox1{
width:100%;
min-height: 150px;
margin-right:0px;
float:left;
}
.parentbox2{
width:50%;
min-height: 150px;
margin-right:0px;
float:left;
}
.parentbox3{
width:33.33%;
min-height: 150px;
margin-right:0px;
float:left;
}
.child_div_1{
margin-top: 50px;
margin-left: 15%;
margin-bottom: 0px;
text-align: left;
}
.child_div_2{
margin-left: 15%;
margin-top: 10px;
margin-bottom: 40px;
text-align: left;
}
.child_budget{
margin-top: 10px;
margin-bottom: 40px;
padding-left:15%;
text-align: left;
float: left;
}
.child_value1{
margin-top: 10px;
margin-bottom: 40px;
padding-right: 15%;
text-align: left;
float:right;
}
.child_title{
margin-top: 50px;
margin-bottom: 0px;
text-align: center;
}
.child_budget_number{
padding-right: 20%;
}
.child_value1_number{
padding-left: 20%;
}
.boxbox {
display: table;
width: 99.8%;
height: 160px;
color: #454545;
font-size:1.1vw;
}
.boxbox {
float:left;
display: table;
width: 99.8%;
height: 180px;
color: #454545;
}
.boxbox > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper2" style="height:160px;">
<div class="infobox" id="platform1">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform1_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform1_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform6">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform6_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform6_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform3">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform3_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform3_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform5">
<div class="boxbox" id="platform5">
<div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform5_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform5_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform4">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform4_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform4_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform2">
<div class="boxbox" id="platform2">
<div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform2_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform2_value2"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Your direct child of class container infobox5 is overwriting the CSS color for your Jquery method. You have to remove it first and then use it as demonstrated below:
Note- .eq(index) is better suited for your query in contrast to :nth-of-type(index). You can try them both and see it for yourself.
Pointer:
Clean up your CSS, a lot of unecessary styles have been implemented but for this query, as mentioned by the other answer as well .boxbox class is implementing its own color style and as mentioned the child of div with class infobox5 is also implementing its own color style which overrides the JQuery css being implemented on the parent container.
$(".infobox5").eq(4).css("color", "green"); //Index starts from 0 for 1st element, 1 for 2nd and so on 4 for 5th element of type .infobox5
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
color: #fff;
font-family: Roboto;
margin: 0;
overflow: hidden;
}
h1 {
font-size: 1.2vw;
}
h3 {
font-size: 1.1vw!important;
font-weight: 100;
margin: 0;
padding: 5px;
}
.redSq {
background-color: #ff000a;
width: 117px;
height: 241px;
float: left;
}
.row {
display: table;
width: 99.8%;
height: 180px;
color: #454545;
background-color: #dee9f3;
//border: solid 1px #454545;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
margin-bottom: 10px;
}
.row>.col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
td {
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table {
width: 100%;
background-color: #454545;
font-weight: 500;
border-collapse: separate;
border-spacing: 0.3em 1.1em;
color: #fff;
border: 0;
}
p {
font-size: 1.2vw;
}
.boxes {
padding-top: 40px;
padding-left: 30px;
padding-right: 5%;
min-width: 200px;
float: left;
display: inline-block;
}
#line {
border-bottom: solid 1px #CCC;
margin-top: 0px;
padding-top: 15px;
}
.infobox {
float: left;
margin: 0;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: #454545;
}
.infobox1 {
float: left;
min-height: 150px;
min-width: 100%;
margin: 0;
}
.infobox2 {
float: left;
min-height: 150px;
min-width: 49%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox3 {
float: left;
min-height: 150px;
min-width: 32.33%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox4 {
float: left;
//min-height:150px;
min-width: 23.9%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox5 {
float: left;
min-height: 150px;
min-width: 32.33%;
margin: 0 0.5% 0.7%;
//padding: 18px 0;
}
div.leftBox {
float: left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
div.rightBox {
float: left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
.infocontentheader {
//text-align: center;
line-height: 2.8;
//color: #fff;
vertical-align: middle;
height: 100%;
float: left;
width: 25%;
}
.infocontent {
text-align: center;
color: #fff;
width: 50%;
float: left;
}
div#facebook.infocontentheader {
background-color: #3c5999;
}
div#facebook.infobox img {
display: block;
margin: 0 auto 0 auto;
}
p#sTitle {
font-weight: 900;
font-size: 1.5vw;
}
p#bTitle {
//font-weight: 900;
font-size: 1.2vw;
}
p#facebook_spend,
p#youtube_spend,
p#search_spend,
p#programmatic_spend,
p#instagram_spend,
p#twitter_spend {
font-weight: 900;
font-size: 1.3em;
margin: 10px 0 0 20px;
}
p#facebook_budget,
p#youtube_budget,
p#search_budget,
p#programmatic_budget,
p#instagram_budget,
p#twitter_budget {
font-size: 1.2em;
margin: 10px 0 0 20px;
}
div#twitter.infocontentheader {
background-color: #1da1f2;
}
div#twitter.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#programmatic.infocontentheader {
background-color: #a15aa0;
}
div#display.parentbox {
background-color: #b3b3b3;
color: #fff;
}
div#video.parentbox {
background-color: #999999;
color: #fff;
}
div#mixed.parentbox {
background-color: #c1c1c1;
color: #fff;
}
#programmatic div.infocontentheader {
color: #fff;
}
div#programmatic.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#programmatic_value.infocontent {
color: #000;
}
div#youtube.infocontentheader {
background-color: #ff0102;
}
div#youtube.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#search.infocontentheader {
background-color: #cac9c2;
}
div#search.infobox img {
display: block;
margin: 10% auto 0 auto;
}
div#instagram.infobox {
background-color: #fff;
}
div#instagram.infobox img {
display: block;
margin: 10% auto 0 auto;
}
.hidden {
display: none;
}
#parent_div_1 {
width: 50%;
min-height: 150px;
background-color: #757476;
margin-right: 0px;
float: left;
}
#parent_div_2 {
width: 50%;
min-height: 150px;
background-color: #8D8D8D;
margin-right: 0px;
float: left;
}
.parentbox {
width: 33.33%;
min-height: 150px;
/*background-color: #8D8D8D;*/
margin-right: 0px;
float: left;
}
.parentbox1 {
width: 100%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.parentbox2 {
width: 50%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.parentbox3 {
width: 33.33%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.child_div_1 {
margin-top: 50px;
margin-left: 15%;
margin-bottom: 0px;
text-align: left;
}
.child_div_2 {
margin-left: 15%;
margin-top: 10px;
margin-bottom: 40px;
text-align: left;
}
.child_budget {
margin-top: 10px;
margin-bottom: 40px;
padding-left: 15%;
text-align: left;
float: left;
}
.child_spend {
margin-top: 10px;
margin-bottom: 40px;
padding-right: 15%;
text-align: left;
float: right;
}
.child_title {
margin-top: 50px;
margin-bottom: 0px;
text-align: center;
}
.child_budget_number {
padding-right: 20%;
}
.child_spend_number {
padding-left: 20%;
}
.boxbox {
display: table;
width: 99.8%;
height: 160px;
font-size: 1.1vw;
}
.boxbox {
float: left;
display: table;
width: 99.8%;
height: 180px;
}
.boxbox>.col-lg-6 {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper2" style="height:160px;">
<div class="infobox infobox5" id="platform1">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform1_value1">353</div>
</div>
<div id="bTitle">value2<br>
<div id="platform1_value2">1,634</div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox hidden" id="platform6">
<div class="boxbox" style="color: rgb(255, 255, 255);">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform6_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform6_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform5">
<div class="boxbox" >
<div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform5_value1">706</div>
</div>
<div id="bTitle">value2<br>
<div id="platform5_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform3">
<div class="boxbox" id="platform3" >
<div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform3_value1">404</div>
</div>
<div id="bTitle">value2<br>
<div id="platform3_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform4">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform4_value1">353</div>
</div>
<div id="bTitle">value2<br>
<div id="platform4_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform2">
<div class="boxbox" id="platform2" >
<div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform2_value1">404</div>
</div>
<div id="bTitle">value2<br>
<div id="platform2_value2">6,364</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use: element.eq(n); where n is the index value of the element