I have completed the coding for the initial HTML and JavaScript/JQuery components. Now, I am looking to enhance the final common list by wrapping it with an additional UL tag using JavaScript/JQuery. This means that the final common list will be enclosed by two UL elements instead of just one. For example: Desired Result
<ul id="CommonLister">
<ul> <!--This needs to be added-->
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul><!--This needs to be added-->
</ul>
Current Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="listOne">
<li class="columnItem">John</li><!--To be moved under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li><!--To be moved under CommonLister-->
</ul>
<ul id="listTwo">
<li class="columnItem">John</li><!--To be moved under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li><!--To be moved under CommonLister-->
</ul>
<ul id="CommonLister">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul>
</div>
$(function() {
$('#run-code').on('click', function(e) {
e.preventDefault();
//Not relevant
var currentItems = {}; //Empty object
var $mergeColumn = $('#CommonLister'); //Reference to Common List
$('.columnItem').each(function(i, el) {
var $el = $(el);
if (!currentItems.hasOwnProperty($el.html())) {
currentItems[$el.html()] = [];
}
currentItems[$el.html()].push(el);
});
$.each(currentItems, function(name, data) {
if (data.length > 1) {
$.each(data, function(i, el) {
var $el = $(el);
if (i == 0) {
$el.appendTo($mergeColumn);
} else {
$el.remove();
}
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="run-code" class="btn btn-success">Click Me</button>
<h4>List 1</h4>
<ul id="listOne">
<li class="columnItem">John</li>
<!--To be moved under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
<!--To be moved under CommonLister-->
</ul>
<h4>List 2</h4>
<ul id="listTwo">
<li class="columnItem">John</li>
<!--To be moved under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
<!--To be moved under CommonLister-->
</ul>
<h4>Common List</h4>
<ul id="CommonLister">
<!--Additional ul will be inserted here-->
</ul>