JSFiddle - React, Tailwind, and code Playground

by swim89

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://www.finsicilia.it/shared/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="https://www.finsicilia.it/shared/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.finsicilia.it/shared/formvalidation/dist/css/formValidation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<div class="modal fade" tabindex="-1" role="dialog" id="modalAddressees">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Select Addresses</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Chiudi">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row mt-4">
          <div class="col-12">
            <table id="addresseesTable"...

JavaScript

$().ready(function() {

  $('.datepicker').daterangepicker({
    "locale": {
      "format": "DD/MM/YYYY",
      "separator": " - ",
      "applyLabel": "Apply",
      "cancelLabel": "Cancel",
      "fromLabel": "From",
      "toLabel": "To",
      "customRangeLabel": "Custom",
      "weekLabel": "W",
      "daysOfWeek": [
        "Su",
        "Mo",
        "Tu",
        "We",
        "Th",
        "Fr",
        "Sa"
      ],
      "monthNames": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      "firstDay": 1
    },
  });
  $(".select2").select2();

  $('#modalSectors').on('shown.bs.modal', function() {
    var table = $('#sectorsTable').DataTable();
    table.columns.adjust();
  });

  $("#sectorsTable").on("click", ".assign", function() {
    var relation = $(this).closest('td').prev().find(".select2").val();

    if (relation != "") {
      var sectorId = $(this).data('id');

      var obj = {
        id: sectorId,
        relation: relation
      };
      $(this).addClass("btn-danger").addClass("remove-assign").removeClass("btn-info").removeClass("assign").text("Assigned");

      $('form').append('<input type=\'hidden\' id=\'sec-' + sectorId + '\' name=\'sectors[]\' value=\'' + JSON.stringify(obj) + '\'>')
    }

  });

  $("#sectorsTable").on("click", ".remove-assign", function() {
    var element = $(this).closest('td').prev().find(".select2");
    var relation = element.val();
    var sectorId = $(this).data('id');

    element.val("");
    element.trigger('change.select2')
    $(this).removeClass("btn-danger").removeClass("remove-assign").addClass("btn-info").addClass("assign").text("Assigned");

    $("form #sec-" + sectorId).remove();

  });
});

$(function() {
  $('#sectorsTable').DataTable({
    processing: true,
    serverSide: true,
    language: {
      "url":...