Hide Replace divs with replaceWith() issues

REVISED:

SO, what I am trying to do is replace the entire div with another div, each time leading to a new div with links to replace it. I'm close, but Only the first selection works properly.

$(document).ready(function() {    $(".link2").click(function() {      $(".changesections").replaceWith($("#section2").show());    });    $(".link1").click(function() {      $(".changesections").replaceWith($("#section1").show());    });    $(".link3").click(function() {      $(".changesections").replaceWith($("#section3").show());    });    $("#section2").hide();    $("#section3").hide();  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  <div id="section1" class="changesections">    <span class="link1">Link 1</span>    <p>      <span class="link2">Link 2</span>      <p>        <span class="link3">Link 3</span>  </div>    <div id="section2" class="changesections">    <span class="link1">**Link 1</span>    <p>      <span class="link2">**Link 2</span>      <p>        <span class="link3">**Link 3</span>  </div>    <div id="section3" class="changesections">    <span class="link1">****Link 1</span>    <p>      <span class="link2">****Link 2</span>      <p>        <span class="link3">****Link 3</span>  </div>

Here is new my working example

Only one div should show at a time.

https://stackoverflow.com/questions/65588638/hide-replace-divs-with-replacewith-issues January 06, 2021 at 08:43AM