Replacing multiple HTML elements using Jquery

Question

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

Answer 1

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><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>