JSFiddle - React, Tailwind, and code Playground

HTML

<button id="cancel">
 Cancel
</button>

<div id="sortable_groups">     
  <div class="sort_block" id="1">
  <div class="dg_acc_div"><b>block 1 div 1</b></div>
     <div class="dgroup_tables"> block 1 div 2 </div>
     <div class="hidden_dg"> block 1 div 3 </div>
  </div>
  <div class="sort_block" id="2">
  <div class="dg_acc_div"><b> block 2 div 1</b></div>
     <div class="dgroup_tables"> block 2 div 2 </div>
     <div class="hidden_dg"> block 2 div 3 </div>
  </div>    
    <div class="sort_block" id="3">
    <div class="dg_acc_div"> <b>block 3 div 1</b></div>
     <div class="dgroup_tables"> block 3 div 2 </div>
     <div class="hidden_dg"> block 3 div 3 </div>
  </div>
</div>

JavaScript

$(function(){
		var original_order = $('#sortable_groups').html()
    $('#sortable_groups').sortable({placeholder: "ui-state-highlight",helper:'clone'});
    $('#sortable_groups').on('click', '.dg_acc_div' , function(e){ 
    		window.alert($(this).html())
    });
    $('#cancel').click(function() { 
    		$('#sortable_groups').empty().html(original_order);
    });

})