Adding data to table dynamically using jQuery

by Naresh

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container"><br>
		<form id="lg_form row">
			<div class="col-xs-5">
				<input type="text" name="name" id="name" class="form-control" placeholder="Ledger group name" required />
			</div>
			<div class="col-xs-5">
				<select  id="type" name="type" class="form-control" required>
					<option value="">Select group type</option>
					<option value="Creditors">Creditors</option>
					<option value="Current Assests">Current Assests</option>
					<option value="Debtors">Debtors</option>
					<option value="Expenditure">Expenditure</option>
				</select>
			</div>
			<div class="col-xs-2">
				<button id="add" class="btn btn-success">Add</button>
			</div>
		</form><br><br><br>
	
		<div style="border: 1px solid lightgray;" class="table-responsive">
			<!-- Table to display Ledger Groups -->
		    <table class="table table-striped">
				<thead>
            <th><b>Ledger Group Name</b></th>
            <th><b>Ledger Group Type</b></th>
				</thead>
				<tbody id="tbody">
            <tr>
                <td>Directors</td>
                <td>Income</td>
            </tr>
            <tr>
                <td>Sundry Creditros</td>
                <td>Creditors</td>
            </tr>
				</tbody>
			</table> <!-- END: Ledger groups -->
		</div>
	</div>

JavaScript

$("#add").on('click', function(e) {
    e.preventDefault();
    var name = $('#name').val();
    var type = $('#type').val();

    $('#tbody').append(
        '<tr>' + 
            '<td>' + name + '</td>' +
            '<td>' + type + '</td>' +
        '</tr>'
    );
});