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')) {

                    var newRow = document.createElement('tr');
                    newRow.setAttribute('class','rowDynamic');
               
                    $eventCatcher.get(0).appendChild(newRow);
                    newRow.innerHTML = $currentRow.html();
                }
            }
        });

    });