JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.trenthamunited.com/archive/db/jqwidgets/styles/jqx.bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>

<select name="mydropdown1" class="firstdropdown">
  <option selected="selected">default
  </option>
</select>
<select name="mydropdown2" class="seconddropdown">
  <option selected="selected">default
</select>
<br />
<div class="type">
  <input type="radio" name="radio" id="radio1" class="radio">
  <label for="radio1" class="label">4 Nöbetçisi</label>
</div>

<div class="type">
  <input type="radio" name="radio" id="radio2" class="radio" />
  <label for="radio2" class="label">Normal Nöbetçi</label>
</div>
<div class="type">
  <input type="radio" name="radio" id="radio3" class="radio">
  <label for="radio3" class="label">Tam zamanlı nöbetçi</label>
</div>
<br />
<br />
<br />
<div id="datepickerPart" class="datePicker hidden">
  <input class="input from" />
  <input class="input to" />
  <button class="updateButton">✎ </button>
  <button class="controlButton">√ </button>

</div>
<div class="calendar">
<div id='jqxCalendar'></div>
</div>

<button id="new">✚</button>
<button id="remove">✂</button>
<div class="datePart">

</div>


<button id="submit">
  ↻
</button>
<div id="scheduler"></div>
<div id='jqxWidget'></div>

CSS

body {
  font-family: "Georgia";
  font-size: 12px;
  height: 16px;
  margin: 10px;
  color: #999;
  background-color: #f9f9f9;
}

.firstdropdown,
.seconddropdown {}

select {
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
  font-family: "Georgia"
}

option:not(:checked) {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  font-family: "Georgia"
}

form {
  margin: 40px 0;
}

div {
  clear: both;
  margin: 0 0;
}

label {
  width: 225px;
  border-radius: 1px;
  border: 2px solid #D1D3D4;
  font-family: "Georgia";
  font-size: 12px;
  line-height: 16pt;
  font-weight: bold;
  text-align: center;
  text-indent: 1em;
  background-color: #f5f7e3;
  ;
}


/* hide input */

input.radio:empty {
  margin-left: -999px;
}


/* style label */

input.radio:empty ~ label {
  position: relative;
  float: left;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.radio:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #747a79;
  border-radius: 3px 0 0 3px;
}


/* toggle hover */

input.radio:hover:not(:checked) ~ label:before {
  content: '↲';
  text-indent: 0.1em;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  line-height: 29px;
}

input.radio:hover:not(:checked) ~ label {
  /* color: #888;*/
}


/* toggle on */

input.radio:checked ~ label:before {
  content: '\2714';
  text-indent: 0.1em;
  font-weight: bold;
  font-size: 12px;
  line-height: 29px;
  color: #bff7be;
  background-color: #f4d78d;
  ;
}

input.radio:checked ~ label {
  color: #585858;
}


/* radio focus */

input.radio:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.special1 {
  background-color: #468754;
}

.special2 {
  background-color: #256082;
}

.special3 {
  background-color: #258247;
}

.special4 {
  background-color:...

JavaScript

$(function() {
    "use strict";
    ConstructFirstDropDown();
    AppearingSecondDropDown();
    eventDelegationJobs();
    fullInputBoxes();
    removeLastInstance();
    fillingArrayWithFields();
    deletingTheSpesificIndex();
    triggerCreatingNewElementEventAfterRemoveOperation();
    demonstratingJQXCalendar();
 
  });

  function eventDelegationJobs() {
    var $body = $('body');
    $body.on('click', '#new', createANewDatepickerSection);
    $body.on('click', '#new', getDatesFromCurrentDatePickers);
    $body.on('click', '#new', setButtonsState);
    $body.on('click', '#remove', removeLastInstance);
    $body.on('click', '.updateButton', removeSpesificInstance);
  //   $body.on('click', '.updateButton',fillingArrayWithFields);
    $body.on('click', '.updateButton',deletingSpecialDates);

  }

  function demonstratingJQXCalendar() {
    $("#jqxCalendar").jqxCalendar({
      width: '200px',
      height: '200px',
   //   columnHeaderHeight: 30,
    //  dayNameFormat: 'shortest',
    //  enableFastNavigation: true,
    //  enableWeekend: true,
    //  selectionMode: 'range',
    //  backText: "Bir önceki ay",
    //  forwardText: "Bir sonraki ay",
      enableTooltips: true,
    //  readOnly: true,
      enableHover: true
    });
  }

  var val, opt;

  function ConstructFirstDropDown() {
    var dropdownObject = {
      "Capability Center 1": "İzleme Sistemleri Yönetimi Alt Gr.",
      "Capability Center 2": "Sistem Yönetimi ve Veri Saklama Alt Gr.",
      "Capability Center 3": "Network Yazılım Alt Gr."
    };
    var $firstDropdown = $('.firstdropdown');

    $firstDropdown.append($.map(dropdownObject, function(value, key) {
      return $('<option>').text(value).val(key);
    }));
  }

  function AppearingSecondDropDown() {

    var $firstDropdown = $('.firstdropdown');
    var $secondDropdown = $('.seconddropdown');
    var $radio = $('.radio');
    var capacityCenter1 = {
      "Person 1": "Kadir Esen",
      "Person 2": "Soner Gönül",
      "Person...