javascript - How to make a certain DIV first child and anything before it append to the end -

fiddle: https://jsfiddle.net/xkdm52gs/3/

jquery:

$(function() { var vhtml = ""; var u5 = new array(); var $divs = $(".chold"); var alphabeticallyordereddivs = $divs.sort(function (a, b) {         return $(a).find("span").text() > $(b).find("span").text();         }); $(".dcon").html(alphabeticallyordereddivs);     $("#arrow-left").click(function() {     //alert("left");     $(".dcon div:first-child").appendto(".dcon");     $(".dcon").remove(".dcon div:first-child");   });   $("#arrow-right").click(function() {     //alert("right");     $(".dcon div:last-child").prependto(".dcon");     $(".dcon").remove(".dcon div:last-child");   });    $(".chold").each(function() {     var k = $(this).text().trim();     console.log(k.charat(0));     u5.push(k.charat(0));   });   console.log(unique(u5).length);   u5 = unique(u5).sort();   (var k = 0; k < u5.length; k++) {     vhtml += "<a class='alink' href='javascript:void(0);'>" + u5[k] + "</a>";   }   $(".theletnum").html(vhtml); });  function unique(list) {     var result = [];     $.each(list, function(i, e) {         if ($.inarray(e, result) == -1) result.push(e);     });     return result; } 

the left/right arrow working fine how can modify script when letter clicked first instance of div represents letter first child , if wasn't first child before should append end.

so e.g. in fiddle: if click n, div text nine should first child , div(s) text eleven, five, four should append end in respective order , forth.

1. have @ jquery prepend.
2. i think better off using scrolling (overflow-x: scroll) selector, eliminate need reorder dom.
3. flexbox better solution dynamic reordering