Jquery divide table cell

Question

I have a table with a couple of cells. When i click (with jquery) on a cell its get divided into four pieces (time interval, where every piece stands for 15 min).

// example
<table>
   <tr>
      <td></td>
      <td></td>
      <td>
         <div class="divider">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
         </div>
      </td>
      <td></td>
   </tr>
</table>

This is working fine, but i want to calculate the width for every label (4 pieces). The width of the cell is changing when the screen gets rezised

For instance if the clicked cell has a width of 17 px. I want to following width

// span 1: 4px    
// span 2: 5px    
// span 3: 4px    
// span 4: 4px 
// total: 17px    

But if a cell has a width of 22px, the following result is disired

// span 1: 6px    
// span 2: 5px    
// span 3: 6px    
// span 4: 5px 
// total: 22px 

I've tried several calculation with mod and dividing but could not get the disired result.

@edit | added JSFiddle code In this file the td width is static set to 22px. https://jsfiddle.net/cymvfmmb/

Answer 1

How could i create a custom sort where

// Algorithm needs to be
// low | highest | lowest | highest
[7,6,6,6] would become [6,7,6,6]

// custom sorting the array
    arr.sort(function(x, y){
        if(y < x){
            return x - y;
        }
    });

Answer 2

Calculation for divide a cell based on the width in to 4 equally or more related.

var n=25;
var length=n;
var arr=[0,0,0,0];

for(var i=0;i<length;i++){
 for(var j=0;j<arr.length;j++){
  if(n){
    arr[j]+=1;
    n=n-1;
  }
 }

}
console.log(arr); //[7, 6, 6, 6]