JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div>
	<label>Type Your Name</label>
    <div>
	    <input id="name" type="text" maxlength="20">
    </div>
</div>
<div>
	<label></label>
    <div>
		<table id="Date">
			<tbody>
				<tr>
					<th>Sun</th>
					<th>Mon</th>
					<th>Tue</th>
					<th>Wed</th>
					<th>Thu</th>
					<th>Fri</th>
					<th>Sat</th>
				</tr>
				<tr>
					<td><input name="Sunday" type="checkbox" value="0"></td>
					<td><input name="Monday" type="checkbox" value="1"></td>
					<td><input name="Tuesday" type="checkbox" value="2"></td>
					<td><input name="Wednesday" type="checkbox" value="3"></td>
					<td><input name="Thursday" type="checkbox" value="4"></td>
					<td><input name="Friday" type="checkbox" value="5"></td>
					<td><input name="Saturday" type="checkbox" value="6"></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div>
    <button type="button" id="add">Add</button>
</div>
<br>
<div>
<table id="form">
    <tbody>
	    <tr>
			<th>Rules</th>
	    </tr>
	</tbody>
</table>

JavaScript

var rowNum = 0;
var dateVals = [];

$('#add').click(function() {
	var Name = $('#name').val();
    var dateVals = [];
	$('#Date :checked').each(function () {
        var ckbx = '<input type="checkbox" checked name="' + $(this).attr("name") + '">' + $(this).attr("name");
		dateVals.push(ckbx);
	});
	rowNum ++;
	
    var row = '<tr id="row' + rowNum + '">'
			+ '<td class="rowName">' + Name + '</td>&nbsp;&nbsp;&nbsp;&nbsp;'
    		+ '<td class="rowDate">' + dateVals + '</td>'
			+ '<td><div><button type="button" class="edit">Edit</button></div></td>'
			+ '</tr>';

	$(row).insertAfter($("#form > tbody > tr:last"));
	$('#name').val('');
    $('#Date :checked').removeAttr('checked');
});

$('#form').on('click','.edit',function() {
	var $row = $(this).closest('tr');
	$('.rowName',$row).each(function() {
		if ($(this).find('input').length) {
			$(this).text($(this).find('input').val());
		}
		else {
			var t = $(this).text();
			$(this).html($('<input maxlength="20" />',{'value' : t}).val(t));
		}
	});

	$(this).text(function(_, val){
		return val == 'Save' ? 'Edit' : 'Save';
	});
});