A Pen by Willy Aguirre.

index.html

<div id="visLines" class="channel-visualisation subscription-channels">

    <div class="channel" color="blue" for="sendMessage" data-val="4">
    	4
      <div class="dot color"></div>
    </div>
    <div class="channel" color="pink" for="clear" data-val="3">
    	3
      <div class="dot color"></div>
    </div>
    <div class="channel" color="red" for="set_room" data-val="2">
    	2
      <div class="dot color"></div>
    </div>
    <div class="channel" color="purple" for="set_username" data-val="1">
    	1
      <div class="dot color"></div>
	</div>
  
</div>

<a href="#" id="sortElements">Sort</a>

script.js

var sortElements = document.getElementById("sortElements");
var visLines = document.getElementById("visLines").getElementsByTagName('div');
var visLines2 = document.getElementById("visLines")

var elements = [];
var divs = [];

sortElements.addEventListener("click", function( event ) {
  
    elements = [];
    divs = [];
  
    for(i=0; i< visLines.length; i++){      
      if(visLines[i].getAttribute("data-val") != null){
        elements.push(visLines[i].getAttribute("data-val"));
      }      
    }
  
    elements.sort()
    
    for(i=0; i< elements.length; i++){   
      divs.push(visLines2.querySelector('[data-val="' + elements[i] + '"]'));      
    }
    
    document.getElementById("visLines").innerHTML = "";
    
    for(i=0; i< divs.length; i++){    
      document.getElementById("visLines").innerHTML += divs[i].outerHTML;
    }     
    
}, false);

zyBEH.markdown

zyBEH

A Pen by Willy Aguirre on CodePen.

License.