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

Question

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

я попробовал ниже

проверьте этот код

$('#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" );