JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<section class="controls" id="controls">
      <button id="detach-item" type="button">
        Detach First Item
      </button>
      <button id="attach-item" type="button">
        Re-attach First Item
      </button>
</section>

<section class="elements" id="elements">
      <div class="itema">Third item</div>
      <div class="itemb">Fourth item</div>
      <div class="item">First item</div>
      <div class="item">Second item</div>
      <div class="itemc">Third item</div>
      <div class="itemd">Fourth item</div>
</section>

CSS

.elements, .controls {
  font-family: Arial, sans-serif;
  width: 100%;
  display: block;
}
.elements {
  margin-top: 50px;
}

button {
  display: inline-block;
  margin: 0.75em 0;
}

JavaScript

jQuery(function(){

jQuery('.item').detach();
  
  var item1PreviousSibling, item1Parent;
  
  var item2PreviousSibling, item2Parent;
  
  function getRandomNumber(max) {
  	return Math.floor(Math.random() * (max + 1));
  }
  
  var $item =  jQuery('.item');
  
  jQuery('#detach-item').on('click', function (e) {
  	if (!jQuery.contains(document.documentElement, $item[0])) {
    	alert('Item already detached');
      return;
    }
    
    item1PreviousSibling = $item.prop('previousSibling');
    
    item1Parent = $item.prop('parentElement');
      
    $item.detach();
  });
  
  jQuery('#attach-item').on('click', function (e) {
  	if (jQuery.contains(document.documentElement, $item[0])) {
    	alert('Item already attached');
      return;
    }
    
    if (item1PreviousSibling !== undefined) {
    	$item.insertAfter(item1PreviousSibling);
    } else {
    	$item.prependTo(item1Parent);
    }
    
    item1PreviousSibling = item1Parent = undefined;
  });
  
});