Как изменить порядок добавления элементов, нажав кнопку?

Question

Мне нужна помощь со следующим кодом. Я должен добавить новые элементы li и поменять их местами, нажимая на img вверх или вниз. Мне нужно сделать это динамически. Большое вам спасибо.

$(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

Чтобы изменить порядок этих динамически добавляемых элементов списка с помощью изображений (кнопок), мы устанавливаем обработчик click , сначала выбирая их родительский контейнер, поскольку эти изображения также динамически добавляются!

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

Затем мы используем insertAfter () для перемещения вниз или insertBefore () для перемещения вверх по своим позициям в списке.

$(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>

[ОБНОВЛЕНИЕ] оптимизировал ответ, изменив стиль, чтобы скрыть кнопку на краях ... что лучше, чем делать с jQuery , благодаря @ bhoodream комментарий