JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<p>iMac 27"</p>
<input class="total" value="$0" id="total_item_28" name="total_item_28" disabled="disabled" />
<input class="rate" value="$220" id="price_item_28" name="price_item_28" disabled="disabled" />
<input class="qty" placeholder="0" id="qty_item_28" name="qty_item_28" />
<a href="#" class="orderBtn"><span>add to order</span></a></li>
<li>
<p>LCD/Plasma Wall Bracket </p>
<input class="total" value="$0" id="total_item_29" name="total_item_29" disabled="disabled" />
<input class="rate" value="$220" id="price_item_29" name="price_item_29" disabled="disabled" />
<input class="qty" placeholder="0" id="qty_item_29" name="qty_item_29" />
<a href="#" class="orderBtn"><span>add to order</span></a></li>
<li>
<p>2 Mbps Wireless Internet Access inc Router </p>
<input class="total" value="$0" id="total_item_30" name="total_item_30" disabled="disabled" />
<input class="rate" value="$220" id="price_item_30" name="price_item_30" disabled="disabled" />
<input class="qty" placeholder="0" id="qty_item_30" name="qty_item_30" />
<a href="#" class="orderBtn"><span>add to order</span></a></li>
</ul>
<select size="4" multiple="multiple">
<option>Pick Me</option>
</select>
JavaScript
$('.orderBtn').click(function() {
var $index = $(this).closest('li').index();
if ($('select option#' + $index).length) {
$('select option#' + $index).remove();
} else {
$('select').append( '<option id=' + $index + '>'+$(this).closest('li').find('input.qty').val() +'x '+$(this).closest('li').find('p').text() +'</option>' );
}
});