We Keep Coding

JQuery - Add class on click verifying ID

I'm trying to add a class to a specific element that contains a parent container with a unique ID.
I have several buttons contained in a div, and all of them are using the same classes. For some reason, I can't use only $(this), so I created a loop that adds a unique ID to the containers.
HTML
<div class='section'>
<div class='btn-container' id='btn-1'>
<button class='btn'></button>
</div>
<div class='btn-container' id='btn-2'>
<button class='btn'></button>
</div>
<div class='btn-container' id='btn-3'>
<button class='btn'></button>
</div>
</div>
JQuery
$("button").click(function (e) {
e.preventDefault();
var target = $(e.target).parents(".button-container").attr("id");
console.log(target);
$(target).find(".btn").addClass("active");
});
I'm targeting the ID and it works, the console.log gives me back the correct info. However, for some reason, I can't add the class.
Thank you in advance for any help! (:
Edited:
I'm trying to add the class active to the button that is contained in the ID.
Example:
$("#btn-1 .btn").addClass("active"); but with the ID dynamically populate based on the info from the click.

Keep things simple, this should work
$(document).ready(function() {
$("button").click(function (e) {
e.preventDefault();
$(e.target).addClass("active")
});
});
.active{
border: 1px red solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='section'>
<div class='btn-container' id='btn-1'>
<button class='btn'>Test</button>
</div>
<div class='btn-container' id='btn-2'>
<button class='btn'>Test</button>
</div>
<div class='btn-container' id='btn-3'>
<button class='btn'>Test</button>
</div>
</div>

JQuery onclick function error within post loop

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.
The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.
The code is roughly:
<div class="archive-posts-loop">
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
</div><!--archive-post-loop-->

As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.
$(function(){
$(".post")
.on("click", ".show-form", function() {
$(this).parents(".post").find(".contact-form-wrapper").show("fast");
})
.on("click", ".close", function() {
$(this).parent().hide("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>

You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.

Here is a codepen that does what you want.
https://codepen.io/abidhasan/pen/wpdoyO?editors=1111
This is the jQuery that you can use - basically look for the sibling and change its style
$(".post .show-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "block";
});
$(".post .hide-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "none";
});

Click button, show div content, hide others - JS

I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.

Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY

Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');

TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>

Getting text within a div of a div that is the button

Basically, I have some buttons
<div class="button">
<!--Some other stuff-->
<div class="id">HD5sjW</div>
</div>
<div class="button">
<!--Some other stuff-->
<div class="id">yqWH3X</div>
</div>
<div class="button">
<!--Some other stuff-->
<div class="id">KWZy5V</div>
</div>
and I wanted to use JavaScript to link to another page and I couldn't find an explanation so this is what I came up with and obviously doesn't work at all - how am I meant to do this?
$('.button').click(function () {
confirm("http://domain.com/thing?id=" + $(this + " .id").text());
});
The confirm is just for a blatant output
As another thing, how should I structure my questions better and type of title?

You can use .find() or a context parameter in the jQuery function.
$('.button').hover(function () {
confirm("http://domain.com/thing?id=" + $(".id", this).text());
});
$('.button').hover(function () {
confirm("http://domain.com/thing?id=" + $(this).find('.id').text());
});

Here's a solution using .click() using .hover() will cause the confirm box to trigger multiple times.
$('.button').click(function () {
//find out which buttton this is
var currentBtn = $('.button').index( $(this) );
//use currentBtn to find its matching id div using `:eq()`
var currentId = $('.id:eq('+currentBtn+')').text();
confirm("http://domain.com/thing?id=" + currentId)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button">
<!--Some other stuff-->
<div class="id">HD5sjW</div>
</div>
<br>
<div class="button">
<!--Some other stuff-->
<div class="id">yqWH3X</div>
</div>
<br>
<div class="button">
<!--Some other stuff-->
<div class="id">KWZy5V</div>
</div>

jQuery slide toggle change image onclick?

When I click on the .main_box div both arrow-up images change. I want to change only the first arrow-up image when I click on first .main_box div.
Does anyone know how to do this?
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(".arrow-up, .arrow-down").toggle();
});
});
</script>

Change to this instead, this should only toggle sub-elements to the clicked element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
</script>

Check this jsfiddle.net
JS
$(document).ready(function() {
$('#toggle3').click(function() {
$('.toggle3').slideToggle('1100');
var src = $("#bg3").attr('src') == "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg" ? "http://s12.postimg.org/jy2yiw6ix/box_arrow_up_green.jpg" : "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg";
$("#bg3").attr('src', src);
});
});
Other Code part you get From jsfiddle Link