JS zmiana div góra/dół Opcje

[topcio]

Witajcie

Proszę o pomoc, możecie mi powiedzieć co mam nie tak w poniższym kodzie.

Przy każdym divie pokazują się strzałki.
Jak kliknę raz, przeskakuje div w dół, jak kliknę drugi raz tak jakby skrypt leciał dwa razy.... i tak potem 3,4,5,6,

[PHP] pobierz, plaintext 
            $(document).ready(function(){
                var petID='';
                var itemlist = $('#familiar_items');
                var len=$(itemlist).children().length; 
                $("#familiar_items div").click(function(){
                    selected= $(this).index();
                    petID= $(this).attr("id");
                    $("#familiar_items div").css('border-color', 'lightskyblue');
                    $(this).css('border-color', 'lightgreen');
                    console.log($(this).index());
 
                $("#up_" + petID).click(function(e){
                    e.preventDefault();
                    if(selected > 0){
                        jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                        // selected=selected-1;
                        selected= $("#familiar_items").index();
                        console.log(itemlist.children());
                    }
                    e.preventDefault();
                });
                $("#down_" + petID).click(function(e){
                    e.preventDefault();
                    if(selected < len) {
                        jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                        // selected=selected+1;
                        selected= $("#familiar_items").index();
                        console.log(itemlist.children());
                    }
                });
            });
            });
[PHP] pobierz, plaintext 

Po stronie PHP kod wygląda tak

[PHP] pobierz, plaintext 
            foreach ($acc_settings_file_json->$familiarData as $item) {
                if ($item->petUnlocked == true) {
                    $pet_Id = $item->petId;
                    echo "<div class=\"familiars\" id=\"" . $pet_Id . "\">";
                        echo "<div class=\"familiarsdiv2\">";
                        // obrazek
                        echo "</div>";
                        echo "<div class=\"familiarsdiv3\">";
                            echo "<a id=\"up_" . $pet_Id . "\"><i class=\"fas fa-arrow-up\" style=\"color:darkgreen\"></i></a><br>";
                            echo "<a id=\"down_" . $pet_Id . "\"><i class=\"fas fa-arrow-down\" style=\"color:darkgreen\"></i></a>";
                        echo "</div>";
                        echo "<div class=\"familiarsdiv4\">";
 
                            // echo $pet_Id;
                            echo $familiars[$pet_Id];
                            // echo $familiars_data, " - ", $familiars;
                        echo "</div>";
                    echo "</div>";
                }
            }
[PHP] pobierz, plaintext 

[topcio]

Niestety to Twój punkt widzenia, gdybym czekał na gotowca to nie miałbym nic napisane.
Przychodzę z problemem gdy nie mogę poradzić sobie sam.
No ale ok, dzięki za chęci.
Nie wiem co dla Ciebie jest sieczką, bo dla mnie jest czyste i przejrzyste.
No ale co autor to inne pisanie.
A zakładając z góry że ktoś jest leń, wystawiasz sobie świadectwo.
Dziękuję za pomoc, może ktoś bardziej kompetentny się jeszcze wypowie.

Tak dla potomnych

Zrobiłem, działa.

[PHP] pobierz, plaintext 
            $(document).ready(function(){
                var selected = null;
                var petID='';
                var itemlist = $('.familiars');
                var len=$(itemlist).length; 
                $("#familiar_items .familiars").click(function(){
                    selected= $(this).index();
                    petID= $(this).attr("id");
                    $("#familiar_items .familiars").css('border-color', 'lightskyblue');
                    $(this).css('border-color', 'lightgreen');
                    $("#up_" + petID).click(function(e){
                        e.preventDefault();
                        if(selected > 0){
                            itemlist = $('#familiar_items');
                            jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                        }
                    });
                    $("#down_" + petID).click(function(e){
                        e.preventDefault();
                        if(selected < len) {
                            itemlist = $('#familiar_items');
                            jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                        }
                    });
                });
            });
[PHP] pobierz, plaintext 

A problemem było to, że niestety w PHP pomiędzy DIV miałem ukryte inputy, które były traktowane również jako dzieci , nie zwróciłem na to uwagi.
Gdy przeniosłem je na koniec listy poza obsługiwanego diva, wszystko działa poprawnie.