jQuery сортировка элементов в родительском контейнере по значению поля

Question

У меня есть пример макета. Я хотел бы отсортировать дочерний класс div в алфавитном порядке (или в обратном порядке) на основе входного значения поля Но я хочу только сортировать видимые (не с отображением стиля нет). Я обнаружил, что некоторая функция выполняет аналогичную сортировку, но проблема в том, что после сортировки она добавляет все отсортированные элементы в конец контейнера, что приводит к нарушению порядка с другими скрытыми элементами. Сортировка должна выполняться между видимыми элементами, но общий порядок должен сохраняться для всех элементов в контейнере.

jquery сортировка списка на основе значения атрибута данных

<div class="parent">

        <div class="child">
            <input class="cat" value="a1">
        </div>
        <div class="child">
            <input class="cat" value="b2">
        </div>
        <div class="child" style="display:none;">
            <input class="dog" value="u6">
        </div>
        <div class="child" style="display:none;">
            <input class="dog" value="a3">
        </div>
        <div class="child" style="display:none;">
            <input class="dog" value="s32">
        </div>
        <div class="child">
            <input class="cat" value="z5">
        </div>
        <div class="child" style="display:none;">
            <input class="elephant" value="4234">
        </div>
        <div class="child" style="display:none;">
            <input class="elephant" value="bg">
        </div>

    </div>