Develop Reference

I want to add an active class to second span on a div with two spans with the same class with javascript

I want to add an active class to the second span and remove it from the first span when clicking on the " Click me" with javascript
<span class="click">Click me<span/>.
<div class="subtab">
<span class="first active" data-tabname="reviews" tabindex="0">Reviews</span>
<span class="first " data-tabname="questions" tabindex="0">Questions </span>
</div>

This will work
HTML:
<div>
<span class="span-class active">span 1</span>
<span class="span-class">span 2</span>
</div>
<button id="btn">
alter
</button>
Script:
let spanElements = document.getElementsByClassName("span-class");
let btn = document.getElementById("btn");
btn.addEventListener('click', () => {
if(spanElements[0].classList.contains('active')) {
spanElements[1].classList.add("active");
spanElements[0].classList.remove("active");
} else {
spanElements[0].classList.add("active");
spanElements[1].classList.remove("active");
}
});
CSS
.active {
color: red;
}

How to use Jquery to change div css/scss on a dropdown menu?

I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

jQuery not working on dynamically generated same divs

I am trying to make a comment reply section. I am loading the same div for reply which I use for commenting using $('#1').append($('.enterComment').html()); where 1 is the id of the div which will be displayed when reply is clicked.
.enterComment div contains a hidden submitPost button which will be displayed as soon as the user starts typing comment.
That div is loading properly but The problem for me is that when I loaded the same div in reply section and as I start typing anything in that it only displays the hidden div in the main comment div and not in the reply one.
My html is
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div id="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
For reply I have
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>
and script is
$("body").on('focus', 'textarea', function() {
$('#commentOptions').fadeIn(1000);
});
$("body").on('click', '#1 p .reply', function() {
$('#1').append($('.enterComment').html());
});

You need to fade in the following div of textarea so use .next().
Also, Identifiers in HTML must be unique, hence use CSS class. Here in the example I have used commentOptions CSS class.
$("body").on('focus', 'textarea', function() {
$(this).next('.commentOptions').fadeIn(1000);
});
$("body").on('click', '.commentData p .reply', function() {
var element = $('.enterComment').clone();
element.find('.commentOptions').hide();
$(this).closest('.commentData').append(element);
});
.commentOptions {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div class="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>

I've created an answer in one HTML file which works without dependencies apart from the jQuery and Bootstrap which you were using on your example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body{
padding: 10px;
}
.wrapper{
width: 800px;
margin-right: auto;
margin-left: auto;
}
.submit-comment-btn-container {
display: none;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
$('#comment-textarea').on('focus', function() {
$('.submit-comment-btn-container').fadeIn('fast');
});
$('#submit-comment-btn').on('click', function() {
var text = $('#comment-textarea').val();
if(text != ''){
$('.submit-comment-btn-container').fadeOut();
$('#comment-textarea').val('');
// cloning the first child of the comments to use as a template
var comment = $('.comment-list').children().first().clone();
// replacing the content of the cloned comment with the new text
$(comment).html(text);
// appending the new comment to the comment list
$(comment).appendTo('.comment-list');
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="enterComment">
<form id="insertComment">
<div class="comment-text-container">
<textarea id="comment-textarea" placeholder="Comment here..."></textarea>
</div>
<div class="submit-comment-btn-container">
<button id="submit-comment-btn" type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<div class="comment-list-container">
<ul class="comment-list">
<li>
<div class="comment">
Comment goes here
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

JavaScript - removeClass from matching img title?

I am making new question thread, because I wasn't clear and I agree with that.
So, I have clickable item-cards, if you click on one the class name changes to selected and it also adds the item which you click on to the cart. Each cart item has X behind, if you click it, it will remove the item from the cart, but it doesn't remove the selected part. If I added there that it would remove that class, then it removed it from all items. Example, if I add 2 items in cart and I deleted one from the cart, then it removed the selected class from all, but how could I make it so it would only removes it from, which has same img title? Here are some examples:
Selected Item HTML
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
<div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
<div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $110.52 (You save: $-39.06)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>
Code, if you click on X
$("#itemcart span").click(function() {
$(this).parent().remove()
Code how X is being added
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
Clicking on item-card
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
$("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
$("#itemcart span").click(function() {
$(this).parent().remove()
$(".item-card").removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});

Try this, save selected item in data and get it on click:
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
$("#itemcart").append(cart_item);
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
var self = $(this);
cart_item.on('click', 'span', function() {
$(this).parent().remove()
self.removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});

Here's a running snippet with fake entries. You have to adapt indentifiers to your dynamic code.
Delegate event listening to the <ul> element. Listen to clicks on the <ul><li><div><span> element and remove the <li> 2 parents upward.
<html>
<body>
<ul class="item-store">
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1000">
<div class="iteam" style="text-decoration: underline;text-align: left">
Butterfly Knife | Crimson Web
</div>
<div class="condition" style="text-align: left;text-size:13px">
Field Tested
</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">
BitSkins Price: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1001">
<div class="iteam" style="text-decoration: underline;text-align: left">
Butterfly Knife | Crimson Web
</div>
<div class="condition" style="text-align: left;text-size:13px">
Field Tested
</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">
BitSkins Price: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
//Code, if you click on X
$(".item-store").on('click', '.item-card span', (function() {
$(this).parent().parent().remove();
}));
//Code how X is being added
//$(".item-cart div").each(function()
$(".item-card ").each(function()
{
if( $(this).children().length > 0){
$(this).append($("<span> x</span>"));
} else{
$(this).append($("<span> X</span>"));
}
});
</script>
</body>
</html>

Unrecognized expression in js script

I'm very new into js at all and will need some help with this. This is my vote.js script
function vote(type, value, image_id) {
var dataFields = {'type': type, 'value': value, 'image_id': image_id};
var ThisImageVotes = $("#"+image_id).find('#'+type).html();
$.ajax({ // Ajax
type: "POST",
url: "add_vots.php",
data: dataFields,
timeout: 3000,
success: function(dataBack){
$("#"+image_id).find('#'+type).html(dataBack);
if(type=='positive')
{
$("#"+image_id).find('#voteUp a').replaceWith('');
}
else if(type=='negative')
{
$("#"+image_id).find('#voteDown a').replaceWith('');
}
$("#"+image_id).find('#voteUp("#"+image_id).find("#voteUp a")').attr('class', 'vote_up_done oneLine');
$("#"+image_id).find('#voteDown').attr('class', 'vote_down_done oneLine');
$("#"+image_id).find('#positive').attr('class', 'numberVoted oneLine');
$("#"+image_id).find('#negative').attr('class', 'numberVoted oneLine');
$('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>');
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Error! Please try again!');
}
});
}
What this script do is to let people to vote on image and when vote is done to make button (thumb up/down) grey i.e. disabled. Normally button must go grey right after the vote is done. Currently the vote is recorded into database but buttons doesn't turn grey and I can vote as much as I want. Once the page is refreshed buttons are disabled.
And if need this is the HTML part from the page with images.
<div id="'.$row['image_id'].'" class="pull-right">
<div id="lineBlock">Ratings: ';
if (isset($_COOKIE[$cookie_name])) {
echo '<div class="vote_up_done oneLine"></div>
<div class="numberVoted oneLine">'.$vote['positive'].'</div>';
} else {
echo '<div class="vote_up oneLine" id="voteUp"></div>
<div class="number oneLine" id="positive">'.$vote['positive'].'</div>';
}
if (isset($_COOKIE[$cookie_name])) {
echo '<div class="vote_down_done oneLine"></div>
<div class="numberVoted oneLine">'.$vote['negative'].'</div>';
} else {
echo '<div class="vote_down oneLine" id="voteDown"></div>
<div class="number oneLine" id="negative">'.$vote['negative'].'</div>';
}
echo '</div><span id="message"></span>
</div>
The error in console is this
Uncaught Error: Syntax error, unrecognized expression: #voteUp$("#"+image_id).find("#voteUp a")
Any ideas why buttons doesn't turn grey(disabled) and why is this error?

You need to replace this line:
$("#"+image_id).find('#voteUp("#"+image_id).find("#voteUp a")').attr('class', 'vote_up_done oneLine');
With:
$("#"+image_id).find("#voteUp a").attr('class', 'vote_up_done oneLine');
This looks like a serious typo that you have. Your quotes are scrambled.
Snippet
$(function () {
$(".actions a").click(function () {
if ($(this).hasClass("disabled"))
return false;
$(this).closest(".actions").find(".disabled").removeClass("disabled");
$(this).addClass("disabled");
return false;
});
});
* {padding: 0; margin: 0; list-style: none; font-family: 'Segoe UI'; text-decoration: none; color: #000;}
li {padding: 5px; border: 1px solid #999; width: 200px; border-radius: 3px; margin: 10px;}
li .actions {overflow: hidden; padding: 3px;}
li .actions a {float: right;}
li .actions a:first-child {float: left;}
li .actions a.disabled, li .actions a.disabled i {color: #999;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<ul>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/1" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/2" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/3" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/4" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/5" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
</ul>

The .find should be outside the quote, because it's not part of the jquery selector. '#voteUp' is a jquery selector and should be in quotes, while find is a javascript method that operates on the result of a selector.