JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<button id="swap">SWAP</button>
<div>
  <div id="a">a</div>
  <div id="b">b
    <div>b1</div>
    <div>b2</div>
    <div>b3</div>
  </div>
  <div id="c">c
    <div>c1</div>
    <div id="c2">c2</div>
    <div>c3</div>
    
<div>

CSS

div {
  width: 100px;
  margin-left: 10px;
}

#b {
  background: green;
}

#c2 {
  background: orange;
}

JavaScript

$.fn.swapWith = function(that) {
  var $this = this;
  var $that = $(that);
  
  // create temporary placeholder
  var $temp = $("<div>");
  
  // 3-step swap
  $this.before($temp);
  $that.before($this);
  $temp.before($that).remove();
  
  
  return $this;
}

$("#swap").click(function(){
  $("#b").swapWith("#c2");
});