Javascript-форум - Удаление товара из корзины

Добрый день!

Помогите, пожалуйста, решить проблему. :help: :help: :help:

Нужно удалять и добавлять товары в корзину.

С добавлением всё норм. Но! Удалять получается только первый добавленный товар, и после этого товары не добавляются в корзину на страницу. Именно на страницу, так как через консоль я вижу, что в HTML добавляются новые элемента DOMa, которые соответствуют добавленным товарам.

HTML-код:
<div class="shopping-cart">
<h5></h5>
<div class="items">
<ul>
<li>Price: <span class="chosen_product_price"></span></li>
<li>Quantity: <span class="chosen_product_quantity"></span></li>
<li>Size: <span class="chosen_product_size"></span></li>
<li>Color: <span class="chosen_product_color"></span></li>
<button type="button" class="btn remove_chosen_product">Remove item</button>
</ul>
</div>
</div>

JS-код:
var shopping_cart = $(".shopping-cart");
shopping_cart.find("h5").html($('.products_name'). html());
if(chosen_products.length == 1){
shopping_cart.find(".chosen_product_price").html(c hosen_product.price);
shopping_cart.find(".chosen_product_quantity").htm l(chosen_product.quantity);
shopping_cart.find(".chosen_product_size").html(ch osen_product.size);
shopping_cart.find(".chosen_product_color").html(c hosen_product.color);
}else{
var ul = shopping_cart.find('.items').first().clone();
ul.find(".chosen_product_price").html(chosen_produ ct.price);
ul.find(".chosen_product_quantity").html(chosen_pr oduct.quantity);
ul.find(".chosen_product_size").html(chosen_produc t.size);
ul.find(".chosen_product_color").html(chosen_produ ct.color);
shopping_cart.append(ul);
}
});

$(".remove_chosen_product").on('click', function(){
$(this).parent().remove();});

Надеюсь на помощь.