I need help with following code. I have to add new li elements and them swap elements by clicking on img up or down. I need to do it dynamically. Thank you so much.
$(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>