JSFiddle - React, Tailwind, and code Playground

by SyedNizamChennai

HTML

<div id="img">

</div>
<input type="button" id="btnSort" value="sort"/>

JavaScript

var imagesArray = [{ name: 'English', image: '/images/english.png',key:2 },
   			{ name: 'Hindi', image: '/images/hindi.png',key:3 },
        { name: 'English', image: '/images/english.png',key:2},
        { name: 'Telugu', image: '/images/telugu.png',key:1 }];

var li = "";
var a = fun();
function fun() {
  for(var i in imagesArray) {	
     li +=  '<li><img src='+imagesArray[i].image+'/><span>'+imagesArray[i].name+'</span></div>';
  }
  return li;
}
document.getElementById('img').innerHTML = '<ul>'+a+'</ul>';

document.getElementById('btnSort').onclick = function() {
	imagesArray.sort(function(a, b){
   return a.key-b.key
  })
 
  li = "";
  var b = fun();
  document.getElementById('img').innerHTML = '<ul>'+b+'</ul>';
  
}