Develop Reference

Replacing multiple HTML elements using Jquery

In the following example I am trying to update the value of #viewer_campaign3 with new data and move the older values to other HTML elements. But I think what happens is that I end up overwriting the old data.
$('#viewer_campaign1').html($('#viewer_campaign2'));
$('#viewer_campaign2').html($('#viewer_campaign3'));
$('#viewer_campaign3').html("new data");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section clearfix impact">
<div class="col-md-8 col-md-offset-2">
<h2 class="mb-30"><span><i class="fa fa-refresh fa-spin fa-fw"></i></span>Live</h2>
<div class="">
</div>
<div class="stats mt-30 .col-xs-6 .col-sm-3">
<div class="col-md-4">
<i class="fa fa-heart"></i>
<p>Demo1<span id="viewer_donation_amount1"></span><br><a href="" id=viewer_campaign1>Hello Campaign1</a><p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo2<span id="viewer_donation_amount2"></span><br><a href="" id=viewer_campaign2>Hello Campaign2</a><p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo3<span id="viewer_donation_amount3"></span><br><a href="" id=viewer_campaign3>Hello Campaign3</a><p>
</div>
</div>
</div>
</div>
Any help is appreciated

In your .html() on $('#viewer_campaign1') and $('#viewer_campaign2'), you are not actually assigning the .html() value of each of the corresponding elements as intended.
So change this
$('#viewer_campaign1').html($('#viewer_campaign2'));
$('#viewer_campaign2').html($('#viewer_campaign3'));
To this
$('#viewer_campaign1').html($('#viewer_campaign2').html());
$('#viewer_campaign2').html($('#viewer_campaign3').html());
This will assign the values as you're intending. There were minor edits I made in the full code below, but these changes were all you needed to update appropriately.
$('#viewer_campaign1').html($('#viewer_campaign2').html());
$('#viewer_campaign2').html($('#viewer_campaign3').html());
$('#viewer_campaign3').html("new data");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section clearfix impact">
<div class="col-md-8 col-md-offset-2">
<h2 class="mb-30"><span><i class="fa fa-refresh fa-spin fa-fw"></i></span>Live</h2>
<div class="">
</div>
<div class="stats mt-30 .col-xs-6 .col-sm-3">
<div class="col-md-4">
<i class="fa fa-heart"></i>
<p>Demo1<span id="viewer_donation_amount1"></span><br>Hello Campaign1
<p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo2<span id="viewer_donation_amount2"></span><br>Hello Campaign2
<p>
</div>
<div class="col-md-4 .col-xs-6 .col-sm-3">
<i class="fa fa-heart"></i>
<p>Demo3<span id="viewer_donation_amount3"></span><br>Hello Campaign3
<p>
</div>
</div>
</div>
</div>

Click event fires even when class name removed in jQuery

I have a div object that should be clickable when it contains the class "clickable". In the Click function I remove the "clickable" class, but it still fires when clicking the object. Will it continue to fire even when I remove the class?
HTML:
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
jQuery:
$("div.vote-wrap > div.circle.clickable").click(function () {
let $circle = $(this);
$circle.removeClass("clickable");
}

because you didn't unbind the event in the click callback.
You just remove the class.
$("div.vote-wrap > div.circle.clickable").click(function() {
let $circle = $(this);
$circle.removeClass("clickable");
$(this).unbind('click');//unbind the click event
alert('clicked , and unbind now!');
})
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
and another way:
$("div.vote-wrap").on('click','div.circle.clickable',(function() {
let $circle = $(this);
$circle.removeClass("clickable");
alert('clicked');
}))
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>

Use delegate event on() and unbind the click event with unbind('click') for dynamically created element.
$("div.vote-wrap > div.circle.clickable").on('click',function () {
let $circle = $(this);
$circle.removeClass("clickable");
$circle.unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>

The element event handler is attached to is determined when listener is attached, not when the event is emitted.
you could rewrite that code like this:
// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
let $circle = $(this)
$circle.removeClass("clickable")
})
For solution to your problem check the answers of this question: Event binding on dynamically created elements?

Jquery closest find issue - this.closest(...).find is not a function

Why my (this).closest('.row').find('.col-lg-10').remove(); doesn't work and sending me errors in log?
<div class="row section-first">
<div class="col-lg-2 text-center text-grayer my-auto p-2">
<p class="h6">Newbie</p>
<p class="h5">
<i class="fa fa-diamond m-1" aria-hidden="true"></i>
<i class="fa fa-diamond m-1" aria-hidden="true"></i>
</p>
<img class="mb-1 border-gray" src="http://localhost/forum/public/storage/avatars/1598320e3908c6.jpg" style="width: 112px; height: 112px;"/>
<p class="small m-0">Cirapuszka</p>
<!-----------------------------------------------------------------------------Reputacja----------->
<p class="m-0"><span class="badge bg-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 0</span></p>
<p class="m-0"><span class="badge bg-inverse"><i class="fa fa-minus-square" aria-hidden="true"></i> 0</span></p>
<p class="text-muted">3 postów</p>
<!------------------------------------------------------------------------Button do edycji posta--->
<button class="btn btn-info btn-sm pointer post-edit">Edytuj Post</button>
</div>
<div class="col-lg-10 text-gray p-2">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div class="offset-lg-2 small col-lg-9">
</div>
This is my HTML
And I have here this button
<button class="btn btn-info btn-sm pointer post-edit">
Edytuj Post
</button>
It it scripted in jquery like this:
$(document).on('click', 'button.post-edit', function(e){
e.preventDefault();
(this).closest('.row').find('.col-lg-10').remove();
});
Uncaught TypeError: this.closest(...).find is not a function
at HTMLButtonElement.<anonymous> (voluptas-eum-voluptatem-soluta-numquam-ipsum-totam-est:293)
at HTMLDocument.dispatch (jquery.js:3)
at HTMLDocument.q.handle (jquery.js:3)
It works when it is like (this).closest('.row').remove(); It deletes whole row, but it's not what I intend to do.
col-lg-10 containing content in this post have to be deleted.
So I try using (this).closest('.row').find('.col-lg-10').remove(); but as I said this doesn't work and I don't know why, because we go first to .row by traversing UP in DOM by closest and then down by find to col-lg-10
What is wrong here?

As noted in the question comments, you're missing the jQuery identifier.
Change this:
(this).closest('.row').find('.col-lg-10').remove();
To this:
$(this).closest('.row').find('.col-lg-10').remove();

Toggle the class of another element inside 'this'

I got an accordion code from W3Schools but I'd like to replace a class of an icon <i>.
How may I switchClass() of a element within this on this code?
Code from W3Schools:
var acc = document.getElementsByClassName("course-row");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("unit-row-hide");
}
}
My HTML:
<div class="row-history">
<div class="row course-row active">
<div class="course-name col-md-4">
<i class="fa fa-caret-right" aria-hidden="true"></i>
Curso Teste 4
</div>
<div class="course-progress col-md-2">
<div class="course-progress-bar-wrapper col-md-8">
<div class="course-progress-bar"> </div>
</div>
<div class="course-progress-percent col-md-4">100%</div>
</div>
<div class="course-remaining col-md-2">Completo</div>
<div class="course-timestamp col-md-2">21 horas atrás</div>
<div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div> <!-- .course-row -->
<div class="unit-row">
<div class="row single-unit">
<div class="unit-name col-md-4">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
Curso Teste 4 - Unidade 3
</div>
<div class="unit-nbsp col-md-4"> </div>
<div class="unit-timestamp col-md-2">21 horas atrás</div>
<div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div> <!-- .unit-row -->
</div>
I need to replace the class fa-caret-right from <i class="fa fa-caret-right" aria-hidden="true"></i> to fa-caret-down when the div is collapsed and back to fa-caret-right when it is not collapsed.

You already use the appropriate function: classList.toggle(). Just select the <i> element and apply the function on it for both classes:
var fa = this.getElementsByTagName("i")[0];
fa.classList.toggle("fa-caret-right");
fa.classList.toggle("fa-caret-down");
The first one removes the right arrow, the second one adds the down arrow. On the next click it is vice versa (toggled).

Getting clicked button values jquery

I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.

live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});

jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")

I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/