Positioning of selection menu in navigation bar

Question

I have this requirement for positioning a Menu bar where all the menu items are placed with respect to their positions.

Like: Fist option will be given to 'All WildLife' goes on. Now on the selection of any menu item, that item will be placed at first position and the first option will be second, where the first item 'All Wildlife' will always stays on second.

HTML:

`<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='subpage_top_nav'>
  <ul>
    <li>
      <a href='#'>
        <center>All WildLife</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Kavango</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Northeast Greenland</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Pacific Remote</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Papahānaumokuākea </center>
      </a>
    </li>
  </ul>
</div>`

JS:

  $('.subpage_top_nav li').click(function(e) {
  e.preventDefault();
  $(this).parent().prepend(this);
});

I am able to achieve this by the above logic. I want to place the active menu back to the exact position where it belonged earlier on selection of other menus.

Case: On page render menus comes like: 1. All WildLife 2. Kavango 3. Northeast Greenland 4. Pacific Remote 5. Papahānaumokuākea

case 1: If click on 'Pacific Remote' -> 'Pacific Remote' goes to first position and 'All WildLife' goes to the second position.

case 2: On click of 'Papahānaumokuākea' -> 'Pacific Remote' goes back to its 4th position, 'Papahānaumokuākea' comes at first and 'All WildLife' remains the same.

Answer 1

I am not sure if you are allowed to change the html, so i just went with js, if you can, add the index to the html and you can cut the js to half pretty much

It is done in a "lenghty" way so i hope you can understand the steps

    $('.subpage_top_nav li').click(function(e) {
        e.preventDefault();

        /* find the element that needs to be moved */
        var $toBeMoved = $('.need-to-go-back')

        /* check if any1 actually needs to be moved */
        if($toBeMoved) { 

           /* grab his init position */
          var initPosition = $toBeMoved.attr('initial-position') 

          /* move the element there */
          $('.subpage_top_nav li:eq(' + initPosition + ')').after($toBeMoved)

          /* remove the signaling class */
          $toBeMoved.removeClass('need-to-go-back')

          /* remove the attr */
          $toBeMoved.removeAttr('initial-position') 
       }

       /* grab index */
       var index = $(this).index()

       /* save original index to know where it should be placed */
       $(this).attr('initial-position', index)

       /* add signaling class just to be easier to find it later */
       $(this).addClass('need-to-go-back')
       $(this).parent().prepend(this);
     });