Reorder div or element based on input value change.
–HTML File
<!DOCTYPE html> <html> <head> <title>Order Input on keypress</title> <linkrel="stylesheet"href="css/style.css"> </head> <body> <divclass="container"> <h2>Re-order Input list</h2> <article> <aside data-id="1"><input type="text"></aside> <aside data-id="2"><input type="text"></aside> <aside data-id="3"><input type="text"></aside> <aside data-id="4"><input type="text"></aside> <aside data-id="5"><input type="text"></aside> </article> <h2>Re-order Input list</h2> <article> <aside data-id="1"><input type="text"></aside> <aside data-id="2"><input type="text"></aside> <aside data-id="3"><input type="text"></aside> <aside data-id="4"><input type="text"></aside> <aside data-id="5"><input type="text"></aside> </article> </div> <script src="js/jquery-3.3.1.js"></script> <script src="js/script.js"></script> </body> </html>
–CSS File
*{
margin:0;
padding:0;
box-sizing: border-box;
outline: none;
}
body{
font-family: Arial, Helvetica, sans-serif;
background: #f5f5f5;
}
.container{
width: 500px;
max-width: 90%;
margin:50px auto;
}
h2{
margin-bottom: 20px;
}
article{
background: #fff;
padding: 20px;
}
aside{
margin:0 0 20px;
}
aside input{
width: 100%;
height: 40px;
border: 1px solid #ccc;
padding: 5px 10px;
}
aside input:focus{
box-shadow: 0px 0px 8px #ccc;
}
–JS File
$(document).ready(function($){
$('article').each(function(){
$('aside').each(function(){
$(this).find('input').val($(this).attr('data-id'));
});
})
$('article aside input').change(function(){
var inputV = $(this).val();
if(inputV == ''){
console.log('Please add atleast a value.');
}
if(isNaN(inputV)){
console.log('Please add a number');
}
$(this).parent().attr('data-id', inputV);
var wrapper = $(this).parent().parent('article');
wrapper.find('aside').sort(function(a, b){
return +a.dataset.id - +b.dataset.id;
}).appendTo(wrapper);
})
})