JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="a">
		<p><b>a</b> - <i>elem.html() append</i> - from blue to red</p>
		<ul class="red">
			<li><span>1</span></li>
			<li><span>1</span></li>
			<li><span>1</span></li>
			<li><span>1</span></li>
			<li><span>1</span></li>
		</ul>
		<ul class="blue">
			<li><div>a</div></li>
			<li><div>b</div></li>
			<li><div>c</div></li>
			<li><div>d</div></li>
			<li><div>e</div></li>
		</ul>
	</div>
	<div class="b">
		<p><b>b</b> - <i>elem append</i> - from blue to red</p>
		<ul class="red">
			<li><span>1<span></li>
			<li><span>2<span></li>
			<li><span>3<span></li>
			<li><span>4<span></li>
			<li><span>5<span></li>
		</ul>
		<ul class="blue">
			<li><div>a</div></li>
			<li><div>b</div></li>
			<li><div>c</div></li>
			<li><div>d</div></li>
			<li><div>e</div></li>
		</ul>
	</div>
</div>

CSS

.wrapper {margin: 0 auto; padding: 20px 0; width: 620px;}
	.a {float: left; width: 300px;}
	.b {float: right; width: 300px;}
		ul {margin-bottom: 20px; padding: 20px; border: 1px solid rgba(0,0,0,.1);}
			.red {border-color: red;}
			.blue {border-color: blue;}
				ul span {display: block; margin-bottom: 5px; padding: 5px; background: red;}
				ul div {margin-bottom: 5px; padding: 5px; background: blue;}

JavaScript

var a = $('div.a');
var b = $('div.b');

var a_length = a.find('.red li').length;
var b_length = b.find('.red li').length;

for (var i = 0; i < a_length; i++) {
	var a_li_cont = a.find('.blue li').eq(i).html();
	a.find('.red li').eq(i).append(a_li_cont);
}

for (var i = 0; i < b_length; i++) {
	var b_li_cont = b.find('.blue li').eq(i);
	b.find('.red li').eq(i).append(b_li_cont);
}