JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="/code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="builder_container">
  <div class="element_picker">
    <div class="select_layouts">
      <ul class="connectedSortable" id="columns">
        <li class="col">1</li>
        <li class="col">2</li>
        <li class="col">3</li>
        <li class="col">4</li>
      </ul>
    </div>
  </div>
  <div class="builder_canvas">
    <div class="canvas_container">
      <div class="section">
        <div class="add_or_delete">
          <button class="add-row-btn">Add Row</button>
          <button class="del-row-btn">Delete Row</button>
        </div>
        <div class="row connectedSortable">
          <div class="add_or_delete">
            <button class="add-col-btn">Add Column</button>
            <button class="del-col-btn">Delete Column</button>
          </div>
          <div class="col">1</div>
          <div class="col">2</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.row {
  border: 1px dashed blue;
  margin: 1em;
}

.row .add_or_delete {
  padding: .2em .4em;
}

.col {
  border: 1px dotted red;
  display: inline-block;
  margin-top: -1px;
  margin-left: -1px;
  width: 100%;
}

JavaScript

$(function() {
  $(".add_or_delete .add-row-btn").click(addRow);
  $(".add_or_delete .add-col-btn").click(addCol);

  function addRow(e) {
    console.log("Adding Row.");
    var newRow = $("<div>", {
      class: "row"
    });
    newRow.append($("<div>", {
      class: "add_or_delete"
    }).append($("<button>", {
      class: "add-col-btn"
    }).html("Add Column").click(addCol), $("<button>", {
      class: "del-col-btn"
    }).html("Delete Column").click()), $("<div>", {
      class: "col"
    }).html("&nbsp;"));
    $(e.target).parents(".section").append(newRow);
    make_DragDrop();
  }

  function addCol(e) {
    console.log("Adding Col.");
    $(e.target).parents(".row").append('<div class="col">&nbsp;</div>');
    make_DragDrop();
  }

  function make_DragDrop() {
    $(".row, #columns").sortable({
      placeholder: "ui-state-highlight",
      forcePlaceholderSize: true,
      connectWith: ".connectedSortable",
    });
    $(".row").disableSelection();
  }

  make_DragDrop();
});