Comment changer l'ordre des éléments ajoutés en cliquant sur le bouton ?

Question

J'ai besoin d'aide avec le code suivant. Je dois ajouter de nouveaux éléments li et les permuter en cliquant sur img up ou down. J'ai besoin de le faire dynamiquement. Merci beaucoup.

$(document).ready(function(){
    $(".p-title").hide().fadeIn(1500);
    const nameInput = document.querySelector('#f-name');
    nameInput.focus();

    $('form').on('submit', e=>{
        e.preventDefault(); 
        let name = nameInput.value; 
        addItem(name);
    })
    let addItem = (name)=>{
        $('#list').append('<li>'+name+'<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>');
        nameInput.value = '';
        nameInput.focus();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
        <div class="row">
          <div>
            <h4>
              <span class="text-muted">List</span>
            </h4>
            <ul id='list' class="list-group mb-3">

            </ul>
          </div>
          <div class="col-md-7 order-md-1">
            <form class="needs-validation row-form">
              <div class="mb-3">
                <label for="nazov">Name</label>
                <input id="f-name" type="text" class="form-control" placeholder="name" required>
              </div>
              <hr class="mb-4">
              <button>Submit</button>
            </form>
          </div>     
        </div>
      </main>

Answer 1

Pour réorganiser les éléments de la "liste" ajoutée dynamiquement à l'aide d'images (boutons), nous définissons un élément cliquez sur en sélectionnant d'abord leur conteneur parent, car ces images sont également ajoutées dynamiquement !

$('#list').on('click', '.downArrow', function(e) {

Ensuite, nous utilisons insertAfter() pour se déplacer vers le bas ou insertBefore() pour remonter leur position dans la liste.

$(document).ready(function(){
    $(".p-title").hide().fadeIn(1500);
    const nameInput = document.querySelector('#f-name');
    nameInput.focus();

    $('form').on('submit', e=>{
        e.preventDefault(); 
        let name = nameInput.value; 
        addItem(name);
    })
    let addItem = (name)=>{
        $('#list').append('<li>'+name+'<img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Green_Arrow_Up_Darker.svg" class="upArrow"/ width="16"><img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Red_Arrow_Down.svg" width="16" class="downArrow"/</li>');
        nameInput.value = '';
        nameInput.focus();
    }

$('#list').on('click', '.downArrow', function(e) {
var curLi = $(this).closest('li');
var tarLi = curLi.next('li');
curLi.insertAfter(tarLi);
});

$('#list').on('click', '.upArrow', function(e) {
var curLi = $(this).closest('li');
var tarLi = curLi.prev('li');
curLi.insertBefore(tarLi);
});

});

body{
font-size:1.2em;
}
li:last-child img.downArrow,li:first-child  img.upArrow{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container">
        <div class="row">
          <div>
            <h4>
              <span class="text-muted">List</span>
            </h4>
            <ul id='list' class="list-group mb-3">

            </ul>
          </div>
          <div class="col-md-7 order-md-1">
            <form class="needs-validation row-form">
              <div class="mb-3">
                <label for="nazov">Name</label>
                <input id="f-name" type="text" class="form-control" placeholder="name" required>
              </div>
              <hr class="mb-4">
              <button>Submit</button>
            </form>
          </div>     
        </div>
      </main>

[UPDATE] a optimisé la réponse en changeant le style pour cacher le bouton sur les bords... ce qui est mieux que de le faire avec jQuery. merci à @. bhoodream commentaire