An Easy Representation: modifying the information using the text() function callback:

$("#change").on("click",function() {
 $("span").text(function(i,txt) {
   return {
     "A":"B",
     "B":"C",
     "C":"D",
     "D":"A"
   }[txt];
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<button id="change">CHANGE</button>

IF your span elements are grouped, you can utilize .append() to group them together:

$("#change").on("click", function(){
  $("#spans").append( $("#spans span").eq(0) )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spans">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
</div>
<button id="change">CHANGE</button>

If your SPANS are not grouped (their position in DOM is irrelevant), but they share a common className, you could follow these steps:

• map the content of your <span>s into an array of contents
• modify the array
• finally apply the modified array back to each SPAN individually

var spans = $(".spn");

// Map spans content into Array
var conts = spans.map(function(){
  return this.innerHTML;
}).get();


$("#change").on("click", function(){
  
  // Modify the Array first

  // DIRECTION >>>
  // conts.unshift(conts.pop());

  // DIRECTION <<<
  conts.push(conts.shift());

  // Then set the array values to spans
  spans.text(function(i){
    return conts[i];
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="spn">A</span>
<span class="spn">B</span>
<span class="spn">C</span>
<span class="spn">D</span>
<button id="change">CHANGE</button>

Indeed, you have the flexibility to trigger the switch multiple times by clicking!
If you prefer not to allow that behavior, you can switch from .on( to .one(

If you are looking to dynamically change the text of spans on click, you can achieve this by iterating through all the span elements using the JQuery each() Method:

Here is the HTML structure:

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<br><br><br>
<div id="change">CHANGE</div>

And here is the JQuery code snippet:

$(document).ready(function(){
    $('#change').click(function(){
            $("span").each(function(){
                if ($(this).text() == 'A') {
                    return $(this).text('B');
                }
                else if ($(this).text() == 'B') {
                    $(this).text('C');
                }
                else if ($(this).text() == 'C') {
                    $(this).text('D');
                }
                else if ($(this).text() == 'D') {
                    $(this).text('A');
                }            
        });        
    });
});

Check out the DEMO here: Demo Link

A simple way to achieve this is by using jQuery to detect the click event. Here's an example code snippet that demonstrates how you can change the text content when a specific element is clicked:

$("#btnChange").on("click", function() {
  $("span").text(function(index, text) {
    switch(text) {
      case "Option A": return "Option B";
      case "Option B": return "Option C";
      case "Option C": return "Option D";
      case "Option D": return "Option A";
      default: return text;
    }
  });
});

After carefully examining the documentation, it is evident that your implementation of replaceAll() needs adjustments.

Consider utilizing replaceWith instead.

In addition, to streamline the process of replacing all spans with a single click, eliminate the if-else statement.

After reviewing your code, I have made some modifications. Please refer to the JSFiddle link for more details.

$('#changeText').click(function(){
    $("span").text("updated text");
});

Your solution lies in utilizing the .each() and $(this).html(); functions as per your code.

REVISED CODE

$('#modify').click(function(){
 $('span').each(function(){
   if ($(this).html() == 'X') {
     $(this).html('Y');
   }
   else if ($(this).html() == 'Y') {
     $(this).html('Z');
   }
   else if ($(this).html() == 'Z') {
     $(this).html('W');
   }
   else if ($(this).html() == 'W') {
     $(this).html('X');
   }
 });
});

Updated JSFiddle link

If you're looking for a solution, you could try this:

$(document).ready(function(){
        $('#change').click(function(){
            $('span').each(function(){
                var txt=$(this).text();
                switch (txt){
                    case 'A': $(this).text('B');break;
                    case 'B': $(this).text('C');break;
                    case 'C': $(this).text('D');break;
                    case 'D': $(this).text('A');break;

                }
            })
        });
    });

give this trick a try

 $('#change').click(function(){
        var first = $("span").first();
        var current = first.detach();
        var last = $("span").last();
        current.insertAfter(last)

    });

$('#change').click(function() {
  var initial = $("span").first();
  var current = initial.detach();
  var final = $("span").last();
  current.insertAfter(final)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spans">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
</div>
<button id="change">CHANGE</button>

$('.updateBtn').on('click', function (e) {
    var _map = {
        X: 'Y',
        Y: 'Z',
        Z: 'A'
    };

    $('span').each(function (i, el) {
        el.innerText = _map[el.innerText.trim()];
    });

    e.preventDefault();
});

Your inquiry lacks clarity. If your goal is to modify the text of all spans that share the same content, you can simply target all spans with a selection. For example:

$(document).ready(function(){
    $('#change').click(function(){
        $("span").text('your text');
    });
});

If you intend to customize the text of each individual span (as indicated in your code where each span's text seems to be replaced by the next span's text, except for the last one which adopts the first span's text), you will need to loop through the spans using .each(). This approach would apply regardless of the spans' positions on the page. If you want to specifically target spans with a certain class, replace span with span.yourclass. Here's an example:

$(document).ready(function(){
    $('#change').click(function(){

        var first = $("span").first().text(); // store the text of the first span

        $("span").not(':last').each(function(){ // select all spans except the last
            $(this).text($(this).next('span').text()); // change the text of each span to the text of the next span
        });

        $("span").last().text(first); // set the text of the last span to the text of the first
    });
});

View Example on JSFiddle