In jQuery there is selector concept same as in css we used to select any element from HTML DOM.
Like to select a div by its id is :-
$("#divTest").html();
Here in your scenario you have
element in both product1.html and product2.html you can simply give a id to both of them like
In products1.html
<ul id="ulPoducts1"></ul>
similarly
in products1.html
<ul id="ulPoducts1"></ul>
Now get the inner html of both the ul element and put them in two variables like below :-
var products1 = $("#ulProducts1").html();
var products2 = $("#ulProducts2").html();
Now we can have a
element in allproducts.html page and set the both above html appended here like :-
Ex :-
$("#ulAllProducts").html(products1 + products2 );
Now the main concern here for you is to pass these product list as 'li' elements to allproducts.html page from those two pages for which this link might be of help to you, please check here :-
Click Here
Hope this will be helpful.