JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul class="original-parent" data-order="tim,tom,kim">
  <li data-name="tim">Tim</li>
  <li data-name="kim">Kim</li>
  <li data-name="tom">Tom</li>
</ul>

<div class="new-parent">
  
</div>

<ul class="original-parent" data-order="jimmy,jack,john">
  <li data-name="john">John</li>
  <li data-name="jimmy">Jimmy</li>
  <li data-name="jack">Jack</li>
</ul>

<div class="new-parent">
  
</div>

CSS

.original-parent {
  background: red;
}

.new-parent {
  background: green;
}

JavaScript

$('.original-parent').each(function() {

	var _this = $(this);
  var order = _this.data('order').split(",");

  $.each(order, function(i,v) {

    var orderName = v;
    var element = _this.find('li[data-name="'+ orderName +'"]');
    element.appendTo( _this.next('div') );

  });


});