Tengo el siguiente inconveniente, tengo 5 caja de texto en HTML, quiero mover cada una de ellas, pero no al mismo tiempo, quiero que se pueda apreciar como se mueve una por una, he intentado de varias maneras pero no me parece funcionar alguna, quizás no la aplico de la manera correcta, si alguien me puede ayudar a salir de este apuro.
Básicamente lo que estoy haciendo es el ordenamiento por inserción, el cual quiero poder visualizar el ordenamiento como tal, ver como se mueven las cajas de texto y se posicionen donde corresponden, pero claro, para que la visualización sea posible, necesito hacer que la ejecución del código se detenga, permitiendo que la animación de movimientos se ejecute individualmente y no todas al mismo tiempo.
Este es mi código:
```javascript
'use strict'

var ArrayInsertSort = new Array(6);

//Esta función genera valores aleatorio para el array
function GeneraArreglo(){
    var i = 0;
    while(i != ArrayInsertSort.length){
        var numero = Math.floor(Math.random() * 6) + 1;
        var esRepetido = false;
        while(!esRepetido){
            for(var j = 0; j < i; j++){
                if(numero == ArrayInsertSort[j]){
                    esRepetido = true;
                    break;
                }
            }
            if(!esRepetido){
                ArrayInsertSort[i] = numero;
                i++;
            }
        }
    }
    MostrarArrayIS();
}

//Con esta función muestro el array en las cajas de texto
function MostrarArrayIS(){
    var ArrayIS = document.querySelectorAll(".txtIS");
    var i;
    for(i = 0; i < ArrayInsertSort.length; i++){
        ArrayIS[i].value = ArrayInsertSort[i];
    }
}

//Esta función me permite obtener la posición de la caja de texto y moverla 
function animaInsertSort(index){
    var ArrayIS = document.querySelectorAll(".txtIS");
    var posicion = ArrayIS[index].getBoundingClientRect();
    var t = setInterval(move, 10);
    var pos = 0;
    function move(){
        if(pos >= (-(posicion.top - posicion.bottom) + 5)){
            clearInterval(t);
        } else{
            pos++;
            ArrayIS[index].style.top = pos+'px';
        }
    }
}

//Esta función es del método por inserción, quiero que me permita visualizar el ordenamiento como tal
function InsertSort(){
    var j;
    var aux;
    for(var i = 0; i < ArrayInsertSort.length; i++){
        /*Aquí es donde quisiera aplicar que el código permita 
        ejecutar la función que me permite mover la caja de texto 
        y que este como que se detenga, para que así permita 
        ver como las cajas se mueven una por una y no 
        todas al mismo tiempo.*/
        animaInsertSort(i);
        j = i - 1;
        while((j >= 0) && (aux < ArrayInsertSort[j])){
            ArrayInsertSort[j + 1] = ArrayInsertSort[j];
            j--;
        }
        ArrayInsertSort[j + 1] = aux;
    }
}
```
Mientras que el código en html es
```HTML
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Visualización de ordenamientos - ADA</title>
    </head>
    <body>
        <section>
                <div id="Insert-Sort">
                    <p class="titulo">Insert Sort</p>
                    <div class="array">
                        <input type="text" class="txtIS" readonly>
                        <input type="text" class="txtIS" readonly>
                        <input type="text" class="txtIS" readonly>
                        <input type="text" class="txtIS" readonly>
                        <input type="text" class="txtIS" readonly>
                        <input type="text" class="txtIS" readonly>
                    </div>
                    <div class="boton">
                        <input type="button" value="Ordenar" class="styleboton" onclick="InsertSort();">
                    </div>
                </div>
                    <input type="button" value="Generar Arreglo" class="styleboton" onclick="GeneraArreglo();">
        </section>
        <script type="text/javascript" src="js/scripts.js"></script>
    </body>
</html>
```