We Keep Coding

How to filter elements on basis of data attribute values using jQuery?

I want to filter the elements on the basis of the price they have.
In the code below I want to filter all the elements between 0 to 500 based on the value of data-product-price and data-product-gender. When I click the first and third checkboxes I want all the codes between <b>0 to 500</b> and gender <b>male</b>.
How to change CSS code of all elements on click of checkbox??
$(document).ready(function() {
$("div#filters form input").change(function() {
if ($("input#under-500-checkbox").prop("checked") == true) {
$("div.product").css("display", "none");
$product = $("div.product").data("product-price") > 500;
$product.css("display", "inline-table");
}
});
});
* {
transition: all .25s;
}
div#filters form p.category-name {
font-familt: sans-serif;
margin: 5px 0;
}
img {
width: 200px;
aspect-ratio: 3/2;
}
div.product {
display: inline-table;
border: 2px solid black;
cursor: pointer;
margin: 5px 0;
}
div.product p {
margin: 0;
padding: 0 10px;
}
<div id="filters">
<form action="javascript:void(0);" id="price_filters">
<p class="category-name">Price:</p>
<input type="checkbox" id="under-500-checkbox" name="price_checkbox">
<label for="under-500-checkbox">0 - 500</label>
<br>
<input type="checkbox" id="under-1000-checkbox" name="price_checkbox">
<label for="under-1000-checkbox">500 - 1000</label>
</form>
<form action="javascript:void(0);" id="gender_filters">
<p>Gender:</p>
<input type="checkbox" id="male-checkbox" name="gender_checkbox">
<label for="male-checkbox">Male</label>
<br>
<input type="checkbox" id="female-checkbox" name="gender_checkbox">
<label for="female-checkbox">Female</label>
</form>
</div>
<br><br>
<div class="product" data-product-price="200" data-product-gender="male">
<img src="https://via.placeholder.com/300x200">
<p>Price: 200</p>
<p>Gender: Male</p>
</div>
<div class="product" data-product-price="700" data-product-gender="female">
<img src="https://via.placeholder.com/300x200">
<p>Price: 700</p>
<p>Gender: Female</p>
</div>
<div class="product" data-product-price="800" data-product-gender="male">
<img src="https://via.placeholder.com/300x200">
<p>Price: 800</p>
<p>Gender: Male</p>
</div>
<div class="product" data-product-price="400" data-product-gender="female">
<img src="https://via.placeholder.com/300x200">
<p>Price: 400</p>
<p>Gender: Female</p>
</div>
<div class="product" data-product-price="900" data-product-gender="female">
<img src="https://via.placeholder.com/300x200">
<p>Price: 900</p>
<p>Gender: Female</p>
</div>
<div class="product" data-product-price="150" data-product-gender="male">
<img src="https://via.placeholder.com/300x200">
<p>Price: 150</p>
<p>Gender: Male</p>
</div>
<!-- added by community -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

removeClass on dynamically added class is not working

I have a div which I want to show when specific radio options are selected. This div resides in a form and if a guest, who is a toddler, is attending (by specifying "yes" in the radio options") then this hidden div (guest__cot) should appear. Idea being is that I only want to showcase cot options if a toddler is attending.
I have got the div appearing successfully. However, if I then select no from the radio option, the div still remains visible (doesn't removeClass).
Steps to reproduce, in the demo:
Select "yes" for "Name 1 (Toddler)"
[.guest__cot div appears]
Now, for "Name 1 (Toddler)" select "no", the div still remains visible ($(".guest__cot").removeClass("guest__cot--visible"); isn't executing)
I essentially want to showcase .guest__cot if any toddler has "yes" selected, and to hide it if otherwise.
Demo:
(function($) {
$(".member__attendance-input.is_toddler").on('change', function() {
var $this = $(this);
var attendance_value = $this.val();
var showCotField = "show-cot-field";
if (attendance_value === "yes") {
$this.addClass(showCotField);
} else if ((attendance_value === "no")) {
$this.removeClass(showCotField);
}
if ($('.member__attendance-input').hasClass(showCotField)) {
$(".guest__cot").addClass("guest__cot--visible");
} else {
$(".guest__cot").removeClass("guest__cot--visible");
}
});
})(jQuery);
.rsvp {
padding: 60px 0;
}
form {
padding: 40px;
border: 1px solid #000000;
}
.input-label {
margin: 0 20px 0 0;
}
.member {
margin-bottom: 30px;
}
.member__name {
display: block;
margin-bottom: 15px;
}
.member__options {
margin-bottom: 20px;
}
.guest__cot{
opacity: 0;
height: 0;
margin: 0;
pointer-events: none;
}
.guest__cot--visible {
opacity: 1;
height: auto;
margin-top: 20px;
pointer-events: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="rsvp">
<div class="container">
<div class="row">
<div class="col-12">
<form>
<!-- member 1 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 1 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
<label class="input-label" for="attending-yes-0">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
<label class="input-label" for="attending-no-0">No</label>
</div>
</div>
</div>
<!-- member 2 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 2 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
<label class="input-label" for="attending-yes-1">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
<label class="input-label" for="attending-no-1">No</label>
</div>
</div>
</div>
<!-- member 3 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 3 (Adult)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
<label class="input-label" for="attending-yes-2">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
<label class="input-label" for="attending-no-2">No</label>
</div>
</div>
</div>
<div class="guest__cot">
Show this div if either toddler options are "yes"
</div>
</form>
</div>
</div>
</div>
</div>

You can use .filter(), .map() and .get() to get the values of the selected toddler inputs. Then you use .includes()
to check if any of the values is a 'yes'. Try this
(function($) {
var $toddlerInputs = $(".member__attendance-input.is_toddler").on('change', function() {
var values = $toddlerInputs.filter(':checked').map((i, el) => el.value).get();
if (values.includes('yes')) {
$(".guest__cot").show();
} else {
$(".guest__cot").hide();
}
});
})(jQuery);
.rsvp {
padding: 60px 0;
}
form {
padding: 40px;
border: 1px solid #000000;
}
.input-label {
margin: 0 20px 0 0;
}
.member {
margin-bottom: 30px;
}
.member__name {
display: block;
margin-bottom: 15px;
}
.member__options {
margin-bottom: 20px;
}
.guest__cot{
margin-top: 20px;
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="rsvp">
<div class="container">
<div class="row">
<div class="col-12">
<form>
<!-- member 1 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 1 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
<label class="input-label" for="attending-yes-0">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
<label class="input-label" for="attending-no-0">No</label>
</div>
</div>
</div>
<!-- member 2 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 2 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
<label class="input-label" for="attending-yes-1">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
<label class="input-label" for="attending-no-1">No</label>
</div>
</div>
</div>
<!-- member 3 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 3 (Adult)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
<label class="input-label" for="attending-yes-2">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
<label class="input-label" for="attending-no-2">No</label>
</div>
</div>
</div>
<div class="guest__cot">
Show this div if either toddler options are "yes"
</div>
</form>
</div>
</div>
</div>
</div>

Function changing id only once. [Javascript]

What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.

You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>

No color on hover

I can't seem to figure out why the remaining 3 tabs don't have colors when I hover my mouse. The first 3 are working properly but the remaining 3 are not. I only made adjustments on their margins and nothing more. I just like to put code on my Blogger blog because its quite helpful. Below are the codes I'm having problems with. They are working on the console but when I put it on my blog the hover effect is not there.
p {
margin-top: -30px;
}
.ctc-txt.bg_ffffff.br6 {
width: 642px;
height: 200px;
}
.clr-txt {
top: 160px;
}
.text-center.ct-case.mb10 {
display: flex;
align-items: right;
justify-content: center;
margin-top: -20px;
margin-left: 120px;
}
.counter {
margin-left: -14px;
}
#copyStr {
margin-left: 260px;
margin-top: -10px;
}
#text {
top: -30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/Dieffer/test1/master/mycss.css">
<form method="post" id="text" action="">
<p class="">
Type or Paste your text here to change text case
</p>
<div class="relative">
<textarea class="ctc-txt bg_ffffff br6" name="form_content" id="form_content" onclick="cont()"> </textarea>
<img class="clr-txt" onclick="resete()" src="https://smallseotools.com/asets/images/cleartext.svg">
</div>
<div class="col-lg-12 col-sm-12 pn pt5 pb5">
<div class="button_box h-a">
<div class="counter">
<label>Character Count: <span id="cc"> 0 </span></label>
<label>- Word Count: <span id="wc"> 0 </span></label>
</div>
</div>
</div>
<div class="text-center ct-case mb10" id="ctc_button_box">
<input name="toggle" class="button ctc-btn br6" type="button" id="toggle" value="tOGGLE cASE">
<input name="sentence" class="button ctc-btn br6" type="button" id="sentence" value="Sentence case">
<input name="lower" class="button ctc-btn br6" type="button" id="lower" value="lower case">
<input name="" class="button ctc-btn br6" type="button" id="upper" value="UPPER CASE">
<input name="capitalized" class="button ctc-btn br6" type="button" id="capitalized" value="Capitalize Word">
<input name="alternating" class="button ctc-btn br6" type="button" id="alternating" value="aLtErNaTe cAsE">
</div>
</form>

Have you tried to clean your browser-cache?
Since the Code works just fine, maybe that could cause the problem.

JQuery div.show() is resizing my fields

I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks

Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/