JSFiddle - React, Tailwind, and code Playground
by sesubash
HTML
<div id="itemsRows">
<ul id="row1">
<input type="hidden" id="hfId" value="1" />
<input type="hidden" id="hfOrd" value="2" />
<input type="hidden" id="hfDate" value="3" />
<li class="popup"> <div id="p1"></div> <div id="p2"></div></li>
</ul>
<ul id="row2">
<input type="hidden" id="hfId" value="4" />
<input type="hidden" id="hfOrd" value="5" />
<input type="hidden" id="hfDate" value="6" />
<li class="popup"> <div id="p2"></div> <div id="p2"></div> </li>
</ul>
<ul id="row3">
<input type="hidden" id="hfId" value="2" />
<input type="hidden" id="hfOrd" value="3" />
<input type="hidden" id="hfDate" value="4" />
<li class="popup"> <div id="p3"></div> <div id="p3"></div></li>
</ul>
</div>
<ul id="ajaxrows">
<li>
<input type="hidden" id="hfId" value="1" />
<input type="hidden" id="hfOrd" value="2" />
<input type="hidden" id="hfDate" value="3" />
<div id="p11"></div> <div id="p12"></div>
</li>
<ul>
<ul id="ajaxrows">
<li>
<input type="hidden" id="hfId" value="4" />
<input type="hidden" id="hfOrd" value="5" />
<input type="hidden" id="hfDate" value="6" />
<div id="p20"></div> <div id="p32"></div>
</li>
<ul>
JavaScript
var count =0;
$($("#itemsRows ul")).each(function( index ){
var ajaxResult = $($("#ajaxrows li"))[index];
var count =0;
$($(this).find("input")).each(function( index2 ){
var res = $(ajaxResult).find("input")[index2];
if($(this).val() == $(res).val()){
count++;
}
});
var ajaxResultDivs = $($("#ajaxrows li")[index]).find("div");
if(count == $(this).find("input").length){
$($(this).find("div")).each(function( index ){
$(this).replaceWith($(ajaxResultDivs));
});
}
});
console.log($("#itemsRows"));