JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="list">
<li value="2">2</li>
<li value="4">4</li>
</ul>
JavaScript
var data = {'item':[{'link':"link0",'order':0},
{'link':"link1",'order':1},
{'link':"link2",'order':2},
{'link':"link3",'order':3},
{'link':"link4",'order':4},
{'link':"link5",'order':5},
]};
var count = 0;
console.log(data);
$("#list li").each(function(index, value){ //loops through <li>'s
while(data.item[count].order<$(this).val()){ //insert <li>'s that go before current <li>
$(this).before("<li value='"+data.item[count].order+"'>"
+data.item[count].link+"</li>");
count++;
}
if(data.item[count].order===$(this).val()){ //skip identical <li>'s
count++;
}
});
while(count<data.item.length){ //add remaining <li>'s to the end
$("#list").append("<li value='"+data.item[count].order+"'>"
+data.item[count].link+"</li>");
count++;
}