JSFiddle - React, Tailwind, and code Playground

by Cary Price

HTML

<script src="https://www.appelsiini.net/download/jquery.chained.mini.js"></script>
<div id="filter">
  <a id="clone" href="#">+</a> <a id="remove" href="#">-</a>
</div>
<div id="prodtrcker">
  <select class="L1">
    <option value="1">Lunch/Break</option>
    <option value="2">Meeting</option>
    <option value="3">Training</option>
    <option value="4">Created in Error</option>
    <option value="5">Out of Office</option>
  </select>
  <select class="L2">
    <option value="1" class="2">Team</option>
    <option value="2" class="2">1on1</option>
    <option value="3" class="3">Trainer</option>
    <option value="4" class="3">Trainee</option>
  </select>
  <select class="L3">
    <option value="1" class="1"></option>
    <option value="2" class="2"></option>
    <option value="3" class="3"></option>
    <option value="4" class="4"></option>
  </select>
  <select class="L4">
    <option value="1" class="1"></option>
    <option value="2" class="2"></option>
    <option value="3" class="3"></option>
    <option value="4" class="4"></option>
  </select>
</div>

CSS

#prodtrcker {
  display: none;
}

JavaScript

$(function() {

	  // Form element cloning
	  var i = 0;
	  $('#clone').click(function() {

	    $('#prodtrcker').clone().appendTo('#filter');
	    $('#filter #prodtrcker').attr('id', 'duplicate' + i);
	    $('#filter div:hidden').show();


	    chainItWithId(i);
	    i++;
	  });
	  $('#remove').click(function() {
	    $('#filter > div').last().remove();
	  });

	  $('#clone').click();
	});

	function chainItWithId(id) {
	  $('#duplicate' + id + ' .L2').chained('#duplicate' + id + ' .L1');
	  $('#duplicate' + id + ' .L3').chained('#duplicate' + id + ' .L2');
	  $('#duplicate' + id + ' .L4').chained('#duplicate' + id + ' .L3');
	}


	function chainTemp() {
	  $('#template .L2').chained('#template .L1');
	  $('#template .L3').chained('#template .L2');
	  $('#template .L4').chained('#template .L3');
	}