need guidance regarding showing active/selected/basket with jquery

I'm creating step by step order and I am currently struggling on "Your order" (you can also call it basket or cart) which is another column that displays the .name and .price for the .selected .service

What I am trying to accomplish is if you click on Service #1 the .name and .price will be displayed in their appropiate <li class="order"> <span> and that works.

Since this is a step by step order, once you select Service #x e.g. you will see changes in "Your order", and the next <section> will be visible (Service #x.1, #x.2 and #x.3) but if you click one of these items you will not see any changes in "Your order", and one of my questions is why?

Here's my code:

$(".service").on('click', function() {
  var selected = $('.selected');
  var name = selected.find('.name').html();
  var price = selected.find('.price').html();
  $("li.order > span.service_name").html(name).show();
  $("li.order > span.service_price").html(price).show();

Is it possible to make this code work so it grabs the .name and .price for any .selected item and if it's no longer selected, remove it from the list? Is there a efficient way to create this?

This is my JSFiddle.

Thank you.

Answers 1

Related Articles