I have the following html

<ul class ="paragraphs">
  <li class="paragraph" element="1">1</li>
  <li class="paragraph" element="2">2</li>
  <li class="paragraph" element="3">3</li>
  <li class="paragraph middle" element="4">4</li>
  <li class="paragraph" element="5">5</li>
  <li class="paragraph" element="6">6</li>
  <li class="paragraph" element="7">7</li>
</ul>

I have a variable which is a random element (element="1" to element="7"), I am trying to position that element in middle, but keep other elements in order. So if the element was 2, the order would be 1342567, if the element was 7 the order is 1237456.

I start by removing the middle class

$(".paragraphs middle").removeClass("middle");

I then add .middle to the given element

$(".paragraphs .paragraph[ element=' + Element + ']").addClass("middle");

What I am trying to do now is add the .paragraph.middle in to the middle of the children? One way I was thinking is to check if the element is between 1-4 if so then insert after 4, If the element is between 4-7 then insert before the middle. But wondering if this is the best way, or if there is anything simpler?

Thanks