Как сократить код?
 

Есть код пузырьковой сортировки(не полностью). Код сортирует цифры, работает если заданы цифры в определенном порядке :7, 6, 5, 4, 3, 2, 1. Если цифры поменять, код работает верно,но боксы(col,col1.....) перемещаются уже не так как надо. Как можно это исправить и возможно ли сократить код как-то? Используется библиотека jquery-3.4.1.js.

var arr = [7, 9, 5, 4, 3, 2, 1]; 
document.getElementById("demo7").innerHTML = "МАССИВ ЧИСЕЛ : " +arr; 
document.getElementById("demo").innerHTML = arr; 
document.getElementById("demo").innerHTML = arr[0];
document.getElementById("demo1").innerHTML = arr[1];
document.getElementById("demo2").innerHTML = arr[2];
document.getElementById("demo3").innerHTML = arr[3];
document.getElementById("demo4").innerHTML = arr[4];
document.getElementById("demo5").innerHTML = arr[5];
document.getElementById("demo6").innerHTML = arr[6];

function Animal() {
  function moveElement(arr, from, to) {
    arr.splice(to, 0, arr.splice(from, 1)[0]);
    return arr;  }
{if (arr[0] > arr[1] && arr[1] > arr[2] && arr[2] > arr[3] && arr[3] > arr[4] && arr[4] > arr[5] && arr[5] > arr[6] ) 
	document.getElementById("demo8").innerHTML = moveElement(arr,0,1); 
	document.getElementById("demo9").innerHTML = moveElement(arr,1,2);
	document.getElementById("demo10").innerHTML = moveElement(arr,2,3);
	document.getElementById("demo11").innerHTML = moveElement(arr,3,4);
	document.getElementById("demo12").innerHTML = moveElement(arr,4,5);
	document.getElementById("demo13").innerHTML = ' Первый шаг  '+moveElement(arr,5,6);
$( ".col1" ).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col2" ).delay(2500).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col3" ).delay(5000).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col4" ).delay(7500).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col5" ).delay(10000).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col6" ).delay(12500).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );}

{if (arr[0] > arr[1]  ) 
	document.getElementById("demo14").innerHTML = moveElement(arr,0,1); 
if (arr[1] > arr[2] ) 	
	document.getElementById("demo15").innerHTML = moveElement(arr,1,2);
if (arr[2] > arr[3] ) 	
	document.getElementById("demo16").innerHTML = moveElement(arr,2,3);
if (arr[3] > arr[4] ) 	
	document.getElementById("demo17").innerHTML = moveElement(arr,3,4);
if (arr[4] > arr[5] ) 	
	document.getElementById("demo18").innerHTML = ' Второй шаг  '+moveElement(arr,4,5);

$( ".col2" ).delay(10500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(12500).animate({left: "+=60"}, 2500 );

$( ".col3" ).delay(11500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );

$( ".col4" ).delay(12500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );

$( ".col5" ).delay(15000).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );
$( ".col6" ).delay(17500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );}

{if (arr[0] > arr[1]  ) 
	document.getElementById("demo19").innerHTML = moveElement(arr,0,1); 
if (arr[1] > arr[2] ) 	
	document.getElementById("demo20").innerHTML = moveElement(arr,1,2);
if (arr[2] > arr[3] ) 	
	document.getElementById("demo21").innerHTML = moveElement(arr,2,3);
if (arr[3] > arr[4] ) 	
	document.getElementById("demo22").innerHTML = ' Третий шаг  '+moveElement(arr,3,4);

$( ".col3" ).delay(14500).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(17500).animate({left: "+=60"}, 2500 );	

$( ".col4" ).delay(16500).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(2000).animate({left: "+=60"}, 2500 );		

$( ".col5" ).delay(16500).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(2000).animate({left: "+=60"}, 2500 );		
	
$( ".col6" ).delay(17000).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(2000).animate({left: "+=60"}, 2500 );		
}}
var animal = new Animal();

Почитайте про циклы, с их помощью сократите код вдвое.

Как тогда привязать анимацию, чтобы боксы перемещались верно, даже если цифры массива поменяются.

Нет никакой разницы между N строк стоящими подряд и выполнением одной строки N раз в цикле. ;)

Т.ч., если тебя устраивает работа твоего кода - устроит и работа циклов.

и поубирай переопределения
document.getElementById("demo").innerHTML = arr;
document.getElementById("demo").innerHTML = arr[0];
ты их все равно не увидишь