JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="add-new-btn" title="Add new box">New Box</button>

<!-- COPY OF BOX (HIDDEN) -->
<div id="box-copy" class="indi-box" style="border: 2px solid; border-radius: 10px ; padding: 20px; margin: 2px; background-color: #eee; width:20%;  cursor: move;" hidden>
    <form id="test-id" method="post" action="">
      <p><label for="id_chosen_string">Please select:</label>
      <select name="chosen_string" required="">
      <option value="" selected="">Select...</option>
      <option value="a0">a0</option>
      <option value="b1">b1</option>
      </select></p>
    </form>
    <p><label for="id_chosen_number">Please select:</label>
    <input type="number" name="chosen_number" placeholder="0" required=""></p>
</div>


<div id="canvas" style="background-color: #444; height: 90%; overflow: auto;">

</div>

JavaScript

$(document).ready(function() {
  $("#add-new-btn").on("click", function(){
    let clone = $("#box-copy").clone().removeAttr("hidden").removeAttr("id");
    clone.find("*").removeAttr("id");
    clone.draggable().resizable();
    $('#canvas').append(clone);
  });
});

// removing elements on double click  -- not yet working.
$(document).ready(function(){
  $('#canvas .indi-box').on('dblclick', function(){
    $(this).remove();
  });
});

// check for value change in any of the forms
$(document).ready(function(){
  $(".indi-box select[name='chosen_string']").on("input", function(){
    alert($(this).val()); 
  });
});