JSFiddle - React, Tailwind, and code Playground

by Lee Cooper

HTML

<table id="pnlSelection">
		<tr id="rowRequired">
			<td class="radioCell">
				Select
			</td>
			<td>
				<select name="cboDay">
					<option value="First">First</option>
					<option value="Second">Second</option>
					<option value="Third">Third</option>
					<option value="Fourth">Fourth</option>
					<option value="Fifth">Fifth</option>
					<option value="Last">Last</option>
				</select>
			</td>
		</tr>
		<tr class="rowDynamic">
			<td class="radioCell">
				And
			</td>
			<td>
				<select name="cboDay">
					<option value="" selected="selected"></option>
					<option value="First">First</option>
					<option value="Second">Second</option>
					<option value="Third">Third</option>
					<option value="Fourth">Fourth</option>
					<option value="Fifth">Fifth</option>
					<option value="Last">Last</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>

JavaScript

$(document).ready(function () {

		$('#pnlSelection').on('change', 'tr.rowDynamic select[name="cboDay"]', function (event) {

			var $eventTarget = $(event.target),
				$eventCatcher = $('#pnlSelection'), // As cant access the root from code??
				newVal = $eventTarget.val();

			// if the select has been changed to a empty value and there is only one dynamic row left then do nothing, as this needs to remain
			if (newVal.length === 0 && $eventCatcher.find('tr.rowDynamic').size() < 2)
				return false;

			var $currentRow = $eventTarget.closest('tr');

			// if the selction has been made remove the row from 
			if (newVal.length === 0)
				$currentRow.remove();
			else {

				if (!$eventCatcher.find('tr.rowDynamic select[name="cboDay"] option[value=""]').is(':selected')) {

					$currentRow.clone()
                        .find('select[name="cboDay"]')
                            .val('')
                        .end()
                    .appendTo($eventCatcher);
                }
			}
		});

	});