jQuery - div для анимации с помощью метода InsertAfter ()

Question

У меня есть N чисел div со следующей структурой:

<div id="cardContainer">
                <div class="row" data-hj-masked="">

                </div>
                <div class="row">
                    <div id="cardCuenta2" class="cardCuentas" tabindex="0" saldo="34892054,03" tipo="CajaAhorro" moneda="Pesos" esprincipal="esPrincipal" style="position: relative;">
                        <label style="padding-right: 50px;" class="control radiobutton" data-hj-masked="">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <strong class="TextCard titulo" data-hj-masked="">Caja Ahorro pesos 007-4</strong>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <text class="TextCard Texto"> Saldo disponible: $ 34.892.054,03</text>
                            </div>
                            <input class="radio" type="radio" name="radio" id="radioCuenta2" value="2" checked="checked" onclick="seleccionarCheck()" data-hj-masked="">
                            <div class="radiobutton-indicator" data-hj-masked=""></div>
                        </label>
                    </div>
                </div>
                <div class="row" data-hj-masked="">

                </div>
                <div class="row">
                    <div id="cardCuenta0" class="cardCuentas" tabindex="1" saldo="99620000,0" tipo="CuentaCorriente" moneda="Pesos" style="position: relative;">
                        <label style="padding-right: 50px;" class="control radiobutton" data-hj-masked="">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <strong class="TextCard titulo" data-hj-masked="">Cuenta Corriente pesos 007-1</strong>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <text class="TextCard Texto"> Saldo disponible: $ 99.620.000,00</text>
                            </div>
                            <input class="radio" type="radio" name="radio" id="radioCuenta0" value="0" onclick="seleccionarCheck()" data-hj-masked="">
                            <div class="radiobutton-indicator" data-hj-masked=""></div>
                        </label>
                    </div>
                </div>
                <div class="row" data-hj-masked="">

                </div>
                <div class="row">
                    <div id="cardCuenta1" class="cardCuentas" tabindex="2" saldo="499998,0" tipo="CuentaCorriente" moneda="Pesos" style="position: relative;">
                        <label style="padding-right: 50px;" class="control radiobutton" data-hj-masked="">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <strong class="TextCard titulo" data-hj-masked="">Cuenta Corriente pesos 007-0</strong>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <text class="TextCard Texto"> Saldo disponible: $ 499.998,00</text>
                            </div>
                            <input class="radio" type="radio" name="radio" id="radioCuenta1" value="1" onclick="seleccionarCheck()" data-hj-masked="">
                            <div class="radiobutton-indicator" data-hj-masked=""></div>
                        </label>
                    </div>
                </div>
</div>

И через jQuery при определенных обстоятельствах перемещайте первый или последний (с помощью методов InsertAfter и InsertBefore) div в cardContainer.

function moveCardLast(idCard) {
            var posicionIndice = idCard.slice(-1);          
            $('#radioCuenta' + posicionIndice).is(':checked') ? idCardAnterior = idCard : false;            
            $("#" + idCard).insertAfter($("#cardContainer .cardCuentas").last());
        }

        function moveCardFirst(idCard) {
            if (idCard == idCardAnterior){
                var posicionIndice = idCard.slice(-1);
                $('#radioCuenta' + posicionIndice).prop('checked', true);
                idCardAnterior = '';
            }           
            $("#" + idCard).insertBefore($("#cardContainer .cardCuentas").first());
        }

Теперь я хочу анимировать элемент div, который движется вверх или вниз. Я попробовал этот подход, замеченный в другом вопросе: https://codepen.io/dineshnisshanka/pen/KKPzXJB, но кажется, что это не работает с переменным числом делений.

Есть предложения? Спасибо.