JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<div class="schedulingRecord">
    <div class="form-group pi-col-md-12 pi-margin-bottom-10">
        
        <div class="day-time pi-margin-bottom-10">
            <a class="delete" style="cursor:pointer;" onclick="deleteRow(this);">Delete</a>
            <select class="form-control" style="padding:5px; width:100px; height: auto; font-size:13px; margin-right:20px;" name="day">
                <option>Sunday</option>
            </select> 
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="startTime">
                <option>06</option>
            </select>
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="startTimeCon">
                <option selected>AM</option>
                <option>PM</option>
            </select>to 
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:5px;" name="endTime">
                <option>08</option>
            </select>
            <select class="form-control" style="padding:5px; width:55px; height: auto; font-size:13px; margin-right:20px;"name="endTimeCon">
                <option>AM</option>
                <option selected>PM</option>
            </select>
            <select class="form-control" style="padding:5px; width:70px; height: auto; font-size:13px; margin-right:5px;" name="timezone">
                <option>IST</option>
            </select>
            <a href="javascript:void(0);" class="pi-pull-right deleteRecord"><img src="images/delete-icon.png" alt="" title="Remove"/></a>
        </div>
    </div>
</div>
<a href="javascript:void(0);" onclick="addRow();" class="pi-pull-right addRecord" id="addRow">
    <img src="images/add-icon.png" alt="" title="Add New" style="position:relative; top:-1px; right:4px;"/> click
</a>

JavaScript

function addRow(){   
    
    $('.schedulingRecord').append($('.form-group').html());    
}


function deleteRow(curDelete){    
    if($('.delete').length>1)
        $(curDelete).closest('div').closest('div').remove();
    else
    {
        alert('you can not delete default row');
    }
}