JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gdl-right-sidebar">
<ul class="sidebar-wrapper">
<li></li>
<li></li>
  <li class="custom-sidebar">0</li>
  <li class="custom-sidebar">1</li>
  <li class="custom-sidebar" id="text_6">5</li>
  <li class="custom-sidebar">3</li>
    <li class="custom-sidebar" id="text_66">2</li>
  <li class="custom-sidebar">4</li>
  
</ul>

</div>

JavaScript

var parent = document.querySelector('.gdl-right-sidebar .sidebar-wrapper'),
    children = [].slice.call(document.querySelectorAll('.gdl-right-sidebar .custom-sidebar')),
    mixThem = [],
    fixed = {}

children.forEach(function(child, index){

	if (child.id == 'text_6' || child.id == 'text_66' || child.id == 'text-67' || child.id == 'sc_widget-5') {
  	fixed[index] = child
  } else {
  	mixThem.push(child)
  }
})

for (var i=0; i<children.length; i++) {
	if (fixed[i]) {
  	parent.appendChild(fixed[i])
  } else {
  	parent.appendChild(mixThem.splice(Math.floor(Math.random() * mixThem.length), 1)[0]);
  }
}