Keranjang Belanja Sederhana jQuery

HTML

<h3>Pilih Barang </h3>
<table border="1">
<tr>
<th>No.</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Beli</th>
</tr>
<tr>
<td>1.</td>
<td>Monitor</td>
<td>Rp.500.000</td>
<td><button id="beli" nama="Monitor" harga="500000">Beli</button></td>
</tr>
<tr>
<td>2.</td>
<td>Printer</td>
<td>Rp.800.000</td>
<td><button id="beli" nama="Printer" harga="800000">Beli</button></td>
</tr>
<tr>
<td>3.</td>
<td>Sandal</td>
<td>Rp.10.000</td>
<td><button id="beli" nama="Sandal" harga="100000">Beli</button></td>
</tr>
</table>

<h3>Keranjang Belanja</h3>
<div class="keranjang">
</div>

JS.

var i=0;

$("#beli").live("click", function(){

var nama=$(this).attr('nama');

var harga=$(this).attr('harga');

var total=harga+harga;

i++;

$('.keranjang').append('<p>'+i+' | ' +nama+ ' | ' +harga +'<button class="rm">Batal</button></p>');

return false;

});

$(".rm").live("click", function(){

$(this).parents('p').remove();i--;