Как спрятать ненужные стрелки переупорядочения в списке

Question

Но верхний список должен иметь только стрелку вниз, а нижний список должен иметь только стрелку вверх после переупорядочения.

Я попытался ниже

check this code

$('#testidone ul li').append('<span ><img class="down-arrow" id="theImg" src="grey-darrow.png" tabindex="0" /><img class="up-arrow" id="2img" src="theImg.png" tabindex="0" /></span>'); 
 

 
$('#testidone ul li:first span img.up-arrow').css("visibility", "hidden"); 
 
$('#testidone ul li:last span img.down-arrow').css("visibility", "hidden"); 
 

 
newt = $('#testidone ul li span img'); 
 
$(newt).keydown(function(e) { 
 
    var pli = $(this).parent().parent("li"); 
 

 
    if ($("img.down-arrow").is(":focus")) { 
 
    switch (e.which) { 
 

 
     case 40: 
 
     pli.insertAfter(pli.next()); 
 
     break; //down 
 

 

 
    } 
 
    pli.focus(); 
 
    } 
 
}); 
 

 

 

 

 
$("li").parent().css("background-color", "yellow");

li { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="testidone"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div> 
 

 
<div id="testidtwo"> 
 
    <ul> 
 
    </ul> 
 
</div>

Answer 1

$('#testidone ul li').append('<span ><img class="down-arrow" id="theImg"  src="grey-darrow.png" tabindex="0" data-direction="down" /><img class="up-arrow" id="2img" src="theImg.png" tabindex="0" data-direction="up"/></span>'); 

    function setFirstLast(){ 
     $('#testidone ul li:first span img.up-arrow').css("visibility","hidden"); 
     $('#testidone ul li:last span img.down-arrow').css("visibility","hidden"); 
    } 
    setFirstLast(); 
    $("#testidone ul li img").click(function(){ 
     var parentEle = $(this).parent().parent("li"); 
     if($(this).hasClass("down-arrow")){ 
      $('#testidone ul li:first span img.up-arrow').css("visibility","visible"); 
      parentEle.insertAfter(parentEle.next()); 
     } 
     else{ 
      $('#testidone ul li:last span img.down-arrow').css("visibility","visible"); 
      parentEle.insertBefore(parentEle.prev()); 
     } 
     setFirstLast(); 
    }); 
    $("li").parent().css("background-color", "yellow");