We Keep Coding

Why javascript 'if else' statement seems looping over

I am writing some javascript code called account register. The requirement is showing information inputted on the screen when clicked the register button, and each row can be deleted by clicking the delete button on the left.
My problem is when the first time I click the register button, information not showing up. The second time is fine. From the third time, extra rows start added. For me it seems the 'if else' statement is looping over inside the function.
What is the reason of that?
Execute result
var counterVal = 0;
document.getElementById("tuikaBtn").onclick = function() {
const addButton = document.getElementById('tuikaBtn');
const listContainer = document.getElementById('result');
const name = document.getElementById('namae');
const nick = document.getElementById('nickname');
const rmvButton = document.getElementById('rmv');
console.log('counter = ' + counterVal);
if (name.value == "" | nick.value == "") {
window.alert("Please input both name and nickname.");
} else if (counterVal == 3) {
document.getElementById("tuikaBtn").style.display = 'none';
} else {
//funtion to get parent item
const handleRemove = function(e) {
const item = e.target.closest('.item');
//remove the listener, to avoid memory leaks.
item.querySelector('.remove-btn').removeEventListener('click', handleRemove);
item.parentElement.removeChild(item);
};
//adds text and button to list once clicked the button
addButton.addEventListener('click', e => {
const item = document.createElement('div');
const paragraph = document.createElement('div');
const remove = document.createElement('button');
item.classList.add('item');
paragraph.classList.add('paragraph-style');
remove.classList.add('remove-btn');
paragraph.textContent = name.value + ' ' + nick.value;
remove.textContent = 'Remove';
item.append(paragraph);
item.append(remove);
listContainer.append(item);
name.value = '';
nick.value = '';
remove.addEventListener('click', handleRemove);
})
return counterVal += 1;
}
}
.base {
margin: 2% 7% 0;
height: 500px;
background: blue;
padding: 5% 10%;
box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
}
input {
width: 300px;
height: 40px;
font-size: large;
}
#tuikaBtn {
background: green;
}
h1 {
font-family: serif;
}
.form-control::placeholder {
color: #cacaca;
opacity: 1;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #312929;
padding: 5px 10px;
}
.card {
width: 100%;
height: 350px;
}
.back {
padding: 30px;
position: absolute;
bottom: 0;
right: 0;
}
.form-group {
margin: 10px 0 15px 0px;
}
#result {
font-size: 120%;
margin: 10;
margin: 10px 20px;
padding: 10px 5px 20px;
margin: 10px 5px 10px 5px;
}
.row .card {
color: black;
}
.card {
color: blue;
display: block;
position: relative;
}
#modal {
display: none;
margin: 1.5em auto 0;
background-color: white;
border: 1px solid black;
width: 50%;
padding: 10px 20px;
position: fixed;
border-radius: 5px;
}
#overLay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(0, 0, 0, 0.75);
}
.items {
display: flex;
}
.item {
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 6em;
grid-column-gap: 1em;
margin-bottom: 0.667em;
align-items: center;
}
.paragraph-style {
font-style: italic;
}
<div class="base container">
<div class="row">
<h1>Account Register</h1>
</div>
<div class="row">
<div class="card" id="card">
<div class="card-block">
<form id="form-area" class="form-inline" method="post">
<div class="form-group">
<div class="input-group">
<input id="namae" name="namae" type="text" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="nickname" name="nickname" type="text" class="form-control" placeholder="Nick Name">
</div>
</div>
<div class="form-group">
<input id="tuikaBtn" type="button" name="touroku" value="Add">
</div>
</form>
<div id="tuikaMoto">User Information</div>
<div id="result"></div>
</div>
</div>
</div>
</div>
<div id="overLay"></div>

Only one tuikaBtn.onclick is needed. Also no need of counter
document.getElementById("tuikaBtn").onclick = function() {
const listContainer = document.getElementById('result');
const name = document.getElementById('namae');
const nick = document.getElementById('nickname');
const rmvButton = document.getElementById('rmv');
if (name.value == "" || nick.value == "") {
window.alert("Please input both name and nickname.");
}
else {
//funtion to get parent item
const handleRemove = function(e) {
const item = e.target.closest('.item');
//remove the listener, to avoid memory leaks.
item.querySelector('.remove-btn').removeEventListener('click', handleRemove);
item.parentElement.removeChild(item);
document.getElementById("tuikaBtn").style.display = '';
};
//adds text and button to list once clicked the button
////// addButton.addEventListener('click', e => { /// // /no need of this
const item = document.createElement('div');
const paragraph = document.createElement('div');
const remove = document.createElement('button');
item.classList.add('item');
paragraph.classList.add('paragraph-style');
remove.classList.add('remove-btn');
paragraph.textContent = name.value + ' ' + nick.value;
remove.textContent = 'Remove';
item.append(paragraph);
item.append(remove);
listContainer.append(item);
name.value = '';
nick.value = '';
remove.addEventListener('click', handleRemove);
if(listContainer.querySelectorAll('.item').length>=3)
{
document.getElementById("tuikaBtn").style.display = 'none';
}else{
document.getElementById("tuikaBtn").style.display = '';
}
////// })
}
}
.base {
margin: 2% 7% 0;
height: 500px;
background: blue;
padding: 5% 10%;
box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
}
input {
width: 300px;
height: 40px;
font-size: large;
}
#tuikaBtn {
background: green;
}
h1 {
font-family: serif;
}
.form-control::placeholder {
color: #cacaca;
opacity: 1;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #312929;
padding: 5px 10px;
}
.card {
width: 100%;
height: 350px;
}
.back {
padding: 30px;
position: absolute;
bottom: 0;
right: 0;
}
.form-group {
margin: 10px 0 15px 0px;
}
#result {
font-size: 120%;
margin: 10;
margin: 10px 20px;
padding: 10px 5px 20px;
margin: 10px 5px 10px 5px;
}
.row .card {
color: black;
}
.card {
color: blue;
display: block;
position: relative;
}
#modal {
display: none;
margin: 1.5em auto 0;
background-color: white;
border: 1px solid black;
width: 50%;
padding: 10px 20px;
position: fixed;
border-radius: 5px;
}
#overLay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(0, 0, 0, 0.75);
}
.items {
display: flex;
}
.item {
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 6em;
grid-column-gap: 1em;
margin-bottom: 0.667em;
align-items: center;
}
.paragraph-style {
font-style: italic;
}
<div class="base container">
<div class="row">
<h1>Account Register</h1>
</div>
<div class="row">
<div class="card" id="card">
<div class="card-block">
<form id="form-area" class="form-inline" method="post">
<div class="form-group">
<div class="input-group">
<input id="namae" name="namae" type="text" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="nickname" name="nickname" type="text" class="form-control" placeholder="Nick Name">
</div>
</div>
<div class="form-group">
<input id="tuikaBtn" type="button" name="touroku" value="Add">
</div>
</form>
<div id="tuikaMoto">User Information</div>
<div id="result"></div>
</div>
</div>
</div>
</div>
<div id="overLay"></div>

How to duplicate an object in a card by a button

I have a page with multiple MCQ cards and every one should have an option to add another option if necessary but my current function adds this option to all the cards
Here is my fiddle https://jsfiddle.net/abdotamer3/s57jauxw/11/
My function:
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
clone.className = "radioListItemPrimaryContent";
clone.appendTo(".radioListItemView");
});
My cloning function:
function cloneQuestion() {
var question = document.querySelector(".questions");
var clone = question.cloneNode(true);
var numItems = $(".questions").closest(".radioListItemPrimaryContent").length;
var radioButtons = question.querySelectorAll(".radioItemToggle");
console.log(numItems);
clone.querySelector(".questionMainTextArea").value = "Untitled Question";
var addBtn = document.querySelector(".addQuestionBtnRow");
var tbody = addBtn.parentNode;
tbody.insertBefore(clone, addBtn);
}

Generally you should add scope to your selector:
var $card = $(this).closest('.card');
$clone.appendTo($(".radioListItemView", $card));
Also Option numbering should be per card I think.
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var $card = $(this).closest('.card');
var numItems = $(".radioListItemPrimaryContent", $card).length;
var $clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
$clone.className = "radioListItemPrimaryContent";
$clone.find(".optionText").val("Option " + numItems);
numItems++;
$clone.appendTo($(".radioListItemView", $card));
});
.card {
border-radius: .5rem !important;
width: 45rem;
}
.card-body {
padding: 1rem 1.5rem !important;
}
.form_frame td {
padding-top: 12px;
}
.FormHeaderBorder {
background-color: #673ab7;
color: rgba(255, 255, 255, 1);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 10px;
left: -1px;
position: absolute;
top: -1px;
width: calc(100% + 2px);
z-index: 1;
}
.card-selector {
display: flex;
height: calc(100% + 2px);
left: -1px;
position: absolute;
bottom: -1px;
width: 8px;
}
.card-selector-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-selector-color {
background-color: transparent;
flex-grow: 1;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
position: relative;
}
.viewItemActive .card-selector-color {
background-color: #4285f4;
}
.viewItemActive .questionMainTextAreaContent {
display: block;
}
.viewItemInactive .questionMainTextAreaContent {
display: none;
}
.questionMainTextAreaContent {
padding-top: 16px;
background-color: #f8f9fa;
border-radius: 4px 4px 0 0;
width: 60%;
}
.questionMainTextAreaContentArea {
padding-top: 0;
padding-bottom: 0;
display: flex;
position: relative;
}
.viewItemActive .questionHeader {
display: none;
}
.viewItemInactive .questionHeader {
display: block;
}
.questionMainTextArea {
height: 24px;
font-family: 'Google Sans', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: .1px;
line-height: 24px;
font-weight: 400;
color: #000;
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
box-sizing: content-box;
caret-color: #1a73e8;
display: block;
min-height: 24px;
margin: 0;
outline: none;
overflow-y: visible;
overflow-x: hidden;
padding: 0 16px 16px;
resize: none;
white-space: pre-wrap;
z-index: 1;
}
.questionMainTextAreaUnderline {
background-color: #80868b;
bottom: 0;
height: 1px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
.questionMainTextArea:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width .3s ease 0s, left .3s ease 0s;
width: 0;
}
.questionMainTextArea:hover:after {
width: 100%;
left: 0;
}
.questionBodyRadioBody {
margin-right: 0;
margin-bottom: 24px;
}
.radioListItemView {
min-height: 48px;
background: #fff;
}
.radioListItemPrimaryContent {
-moz-box-align: start;
display: flex;
align-items: center;
}
.radioListItemGutter {
-moz-box-align: center;
align-items: center;
display: flex;
flex-shrink: 0;
height: 48px;
}
.radioListTypeIndicator {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
margin-right: 10px;
}
input.radioItemToggle {
-moz-user-select: none;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
box-sizing: content-box;
cursor: pointer;
display: inline-block;
height: 20px;
outline: none;
position: relative;
vertical-align: middle;
width: 20px;
z-index: 0;
}
.radioListItemEditRegion {
padding-right: 2.5rem;
min-height: 48px;
display: flex;
flex: 1;
-moz-box-flex: 1;
flex-wrap: wrap;
}
.radioListValue {
flex-grow: 1;
-moz-box-align: center;
align-items: center;
display: flex;
}
.radioListMorseValue {
flex-grow: 1;
}
.radioListItemValueInput {
margin-top: 8px;
width: 100%;
-moz-user-select: none;
display: inline-block;
outline: none;
}
.TextInputSimpleInputContentArea {
display: flex;
}
.radioListItemValueInput .exportInput {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.TextInputSimpleInput {
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
display: block;
font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
margin: 0;
min-width: 0;
outline: none;
padding: .125em 0;
z-index: 0;
}
.viewItemActive .radioListItemPrimaryContent:hover .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.viewItemActive .radioListItemPrimaryContent:focus-within .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.radioListItemValueInput .exportUnderline {
margin-top: 4px;
}
.TextInputSimpleInputUnderline {
background-color: rgba(0, 0, 0, 0.12);
height: 2px;
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
}
.radioListItemGhostItemInput {
flex-basis: auto;
margin-top: 7px;
width: auto;
display: inline-block;
outline: none;
}
.TextInputSimpleInputMainContent {
position: relative;
vertical-align: top;
}
.TextInputSimpleInputPlaceholder {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #70757a;
}
.viewItemActive .itemHideInactive {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
<div class="radioListMorselRoot itemHideInactive">
<div class="radioListMorselDeleteButton" aria-label="Remove Option">
<span class="ButtonContent">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#5f6368" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</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!

How to sort divs according to color?

What I need: I am developing a website using HTML, CSS, Javascript/JQuery. I have 6 divs. Based on conditions divs have to change their color,size, text and divs have to sort according to colors(red, orange and then green).
What I implemented: I have created three classes in CSS reddivs, orangedivs, and greendivs. Now the divs are changing their colors but they are not sorting according to colors. I tried to prepend them, then it's not according to expectations.
What I am struggling: I am unable to sort the divs according to colors. Any ideas are welcome! Below are supplements
createDiv_111(5100);
function createDiv_111(num) {
if (num >= 5000 && num <= 5300) {
var resize_to_red = document.getElementById('box0');
resize_to_red.classList.add("reddivs");
resize_to_red.innerHTML = "ERROR";
$("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
} else if (num >= 20 && num <= 30) {
var resize_to_orange = document.getElementById('box0');
resize_to_orange.classList.add("orangedivs");
resize_to_orange.innerHTML = "changed to orange";
$("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
} else if (num >= 30 && num <= 40) {
var resize_to_green = document.getElementById('box0');
resize_to_green.classList.add("greendivs");
resize_to_green.innerHTML = "changed to green";
}
}
.reddivs {
position: relative;
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
float: left;
color: white;
text-align: center;
margin: 10px 25px 10px 23px;
}
.orangedivs {
position: relative;
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 10px 26px 10px 23px;
}
.greendivs {
position: relative;
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 40px 30px 20px 24px;
}
.container_for_alldivs {
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs"></div>
<div id="box1" class="alldivs"></div>
<div id="box2" class="alldivs"></div>
<div id="box3" class="alldivs"></div>
<div id="box4" class="alldivs"></div>
<div id="box5" class="alldivs"></div>
</div>
I am posting code for box0 div, but condition for remaining divs are same except the id changes to box1 or box2,...,box5

flexbox is widely supported and you can also use it to reorder divs with css only:
Just add the following to your container:
display: flex;
flex-direction: column;
And add the order for the div, like this:
order: 3;
I also updated your script to loop through all boxes and take a random number from an array to test this.
Green divs are always first, then orange second and finally red third. Update the css to specify the ordering you require.
Example
//options array
var options = [25, 35, 5250];
$(".alldivs").each(function(i, box)
{
//get random number from array
var number = options[Math.floor(Math.random()*options.length)];
createDiv_111(number, box);
});
function createDiv_111(num, box)
{
if (num >= 5000 && num <= 5300)
{
var resize_to_red = box;
resize_to_red.classList.add("reddivs");
resize_to_red.innerHTML = "ERROR";
}
else if (num >= 20 && num <= 30)
{
var resize_to_orange = box;
resize_to_orange.classList.add("orangedivs");
resize_to_orange.innerHTML = "changed to orange";
}
else if (num >= 30 && num <= 40)
{
var resize_to_green = box;
resize_to_green.classList.add("greendivs");
resize_to_green.innerHTML = "changed to green";
}
}
.reddivs, .orangedivs,.greendivs {
/* No need to repeat these */
position: relative;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
text-align: center;
float: left;
color: white;
}
.reddivs {
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
margin: 10px 25px 10px 23px;
order: 3;
}
.orangedivs {
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
margin: 10px 26px 10px 23px;
order: 2;
}
.greendivs {
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
margin: 40px 30px 20px 24px;
order: 1;
}
.container_for_alldivs {
display: flex;
flex-direction: row;
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs"></div>
<div id="box1" class="alldivs"></div>
<div id="box2" class="alldivs"></div>
<div id="box3" class="alldivs"></div>
<div id="box4" class="alldivs"></div>
<div id="box5" class="alldivs"></div>
</div>
p.s. I also tidied up your css to recycle any styles reused between colored divs.

If you really want to sort by css class names (which i find a bit of a hack) You can grab all elements and sort them by their className attribute.
Simple example:
$('#sort').on('click', function() {
var sortedElements = $('.greendivs, .orangedivs, .reddivs').sort(function(a, b) {
debugger
return a.className > b.className;
});
$('.container_for_alldivs').html(sortedElements);
});
.reddivs {
position: relative;
top: 15px;
width: 590px;
height: 155px;
background: #BE0A26;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
float: left;
color: white;
text-align: center;
margin: 10px 25px 10px 23px;
}
.orangedivs {
position: relative;
top: 30px;
line-height: 26px;
width: 151px;
height: 109.5px;
background: #E86B0B;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 10px 26px 10px 23px;
}
.greendivs {
position: relative;
top: 35px;
width: 140px;
height: 70px;
background: #00A096;
padding: 10px;
border-radius: 15px;
font-family: Helvetica, Arial;
font-weight: bold;
color: white;
text-align: center;
float: left;
margin: 40px 30px 20px 24px;
}
.container_for_alldivs {
width: 660px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">Sort</button>
<div class="container_for_alldivs" id="divs_container">
<div id="box0" class="alldivs">
</div>
<div id="box1" class="alldivs greendivs">
</div>
<div id="box2" class="alldivs orangedivs">
</div>
<div id="box3" class="alldivs reddivs">
</div>
<div id="box4" class="alldivs greendivs">
</div>
<div id="box5" class="alldivs reddivs">
</div>
</div>

jQuery toggle animation not playing smooth?

Here is the JSFiddle
Look at the animation, the gray background div expands and collapses with jerk (without animation).
Can anyone help me out.
HTML:
<div class="referrals-data">
<div class="data-contner">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id have-referrals">
<span class="referral-pic"></span>
<span class="referral-name">Click me</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
<div class="my-referral">
<div class="referrals-data sub-referral">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id">
<span class="referral-pic"></span>
<span class="referral-name">User</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
</div> <!--table-elmnt-->
</div>
</div> <!--my-referral-->
</div> <!--table-elmnt-->
jQuery
$('.my-referral').hide();
$('.have-referrals').click(function () {
if($(this).parent().parent().parent().parent().children('.my-referral').css('display') == 'none'){
$(this).addClass('show');
}else{
$(this).removeClass('show');
};
$(this).parent().parent().parent().children('.my-referral').slideToggle();
});
CSS
.table-elmnt { display: table; width: 100%; }
.row-elmnt { display: table-row; width: 100%; padding: ; }
.cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; }
.cell-elmnt:first-child { width: 70%; }
.referrals-data { margin-bottom: 7px; }
.data-contner { background: #d4d4d4; }
.my-referral { padding-left: 25px; }
.sub-referral { margin-bottom: 0; border-bottom: none; }
.referral-id { float: left; padding-left: 20px; }
.referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
.referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
.have-referrals { cursor: pointer; }

Use "Speed" parameter with slideToggle() as :
$(this).parent().parent().parent().children('.my-referral').slideToggle("slow");

It would appear as if displaying the divs as table rows and cells is at the heart of the issue. If you remove those properties and instead display as an inline-block it works perfectly:
http://jsfiddle.net/V5zL8/3/
.table-elmnt {
width: 100%;
}
.row-elmnt {
width: 100%;
}
.cell-elmnt {
width: 15%;
vertical-align: top;
padding: 12px 0;
display: inline-block;
}
.cell-elmnt:first-child {
width: 68%;
padding: 7px 0;
}