Show last fadeIn div in first position

Question

I have 10 divs that displayed at any time.

How can I set the last div shown above (to rank the first position) every time, and not in the html order of the div?

Here is my code:

var myVar; function showDiv(){ var random = Math.floor(Math.random() * $('.notification').length); $('.notification').eq(random).fadeIn(200).delay(3000).fadeOut(200); createRandomInterval(); } function createRandomInterval(){ setTimeout(showDiv, 500+ Math.random() * 4000); } $(document).ready(function(){ createRandomInterval(); }); 

 .notification { width: 200px; height: 50px; background-color: yellow; border: 1px solid rgba(0,0,0,0.2); margin-bottom: 5px; text-align: center; padding-top: 20px; display: none;/* hide initially so that fadIn() fadeOut() will work } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="notification">1</div> <div class="notification">2</div> <div class="notification">3</div> <div class="notification">4</div> <div class="notification">5</div> <div class="notification">6</div> <div class="notification">7</div> <div class="notification">8</div> <div class="notification">9</div> <div class="notification">10</div> 

Here is my fiddle: https://jsfiddle.net/gkq21ppt/3/

EDIT: Idea for a Solution

The solution may be to wrap the divs and set them in reverse order. And then add a JS code that sets the serial number as the flex order number for every new one that disappears in the div. But I do not know how to do this, with my low JS skills.

So the loop might look like this:

• create a number starting with 1 as a variable
• create a class width name, for example. "Spare order [number]"
• in ".order- [number]" class set css property "order" to [number]
• add this class to the loop before it disappears into
• delete this class after it disappears

Or?

Answer 1

You can try to use . prependTo ()

What this will do (I think), removes the active notification and adds it back to the container in the first position. Because of this behavior, flexbox is not required.

Note that this changes the structure of HTML.

updated violin

 var myVar; function showDiv() { var random = Math.floor(Math.random() * $('.notification').length); $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200); createRandomInterval(); } function createRandomInterval() { setTimeout(showDiv, 500 + Math.random() * 4000); } $(document).ready(function() { createRandomInterval(); }); 

 .notification { width: 200px; height: 50px; background-color: yellow; border: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 5px; text-align: center; padding-top: 20px; display: none; /* hide initially so that fadIn() fadeOut() will work */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="notification">1</div> <div class="notification">2</div> <div class="notification">3</div> <div class="notification">4</div> <div class="notification">5</div> <div class="notification">6</div> <div class="notification">7</div> <div class="notification">8</div> <div class="notification">9</div> <div class="notification">10</div> </div>