JSFiddle - React, Tailwind, and code Playground

by swordf1zh

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<h1>Invoice</h1>
<div class="panel-body">
    <div class="table-responsive">
		<table class="table table-condensed table-hover">
			<thead>
				<tr>
					<td><strong>Product</strong></td>
					<td class="text-center">
                        <strong>Price</strong>
                    </td>
					<td></td>
				</tr>
			</thead>
			<tbody id="tabla-detalle">
				<tr class="detalle">
					<td>Samsung Galaxy S5</td>
					<td class="text-center item-reg">900</td>
					<td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
				</tr>
				<tr class="detalle">
					<td>Samsung Galaxy S5 Extra Battery</td>
					<td class="text-center item-reg">250</td>
					<td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
	    		</tr>
				<tr class="detalle">
					<td>Screen protector</td>
					<td class="text-center item-reg">300</td>
					<td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<h1>Available products</h1>
<table class="table" id="search-items-table">
	<thead>
		<tr>
			<th>Product</th>
			<th class="text-center">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr class="list-item">
			<td class="list-item-name">iPhoneX</td>
            <td class="text-center list-item-reg">1000</td>
		</tr>
		<tr class="list-item">
			<td class="list-item-name">Tablet</td>
            <td class="text-center list-item-reg">350</td>
		</tr>
		<tr class="list-item">
			<td class="list-item-name">Item x</td>
            <td class="text-center list-item-reg">300</td>
		</tr>
		<tr class="list-item">
			<td class="list-item-name">Item y</td>
            <td class="text-center list-item-reg">450</td>
		</tr>
	</tbody>
</table>

<button type="button" class="btn btn-primary" id="btn-add-items">Add selected products to invoice</button>

JavaScript

// Delete items from invoice when click on button x
$('.borrar-item').click(function() {
	$(this).closest('tr.detalle').remove();
});

// Select items from 'available products' list
$('.list-item').click(function(){
	$(this).toggleClass('success select2add');
});

// Add selected items from 'available products' to 'INVOICE'
$('#btn-add-items').click(function() {
	$('.select2add').each(function() {
        var name = $(this).children('td.list-item-name').text();
        var price = $(this).children('td.list-item-reg').text();
		$('#tabla-detalle').append('<tr class="detalle"><td>' +name+'</td><td class="text-center item-reg">'+price+'<td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td></tr>');
	});
});