Javascript 使用jQuery显示所选项目值/文本

我正在为我的个人服务逐步创建订单

我想抓取所选项目并在页面的另一部分显示唯一的

.name

和

.price

为了解释我的HTML，可选择的内容是

，这些项目有一个

示例服务和一个
$9.99
，这是这个独特服务的价格。一旦选择了一项服务，它将看起来像
，并且该服务的下一个服务将显示在下面，就像按部就班地工作一样

我的目标是一旦
选择了类
。我想在一个列表中显示
和
，该列表是客户可以控制价格和所选服务的列表。如果未选中，它将不会显示在“您的订单”中

这是我的一些代码：

var selected = $('.selected');
var name = $('.name'); // grab the <span id="name">
var price = $('.price'); // grab the <span id="price">

$(".service").click(function() { 
   $( "li.order > span.service_name" ).html( name ).show();
   $( "li.order > span.service_price" ).html( price ).show();
});

var selected=$（'.selected'）；
变量名称=$（'.name'）；//抓住
var价格=$（'.price'）；//抓住
$（“.service”）。单击（函数（）{
$（“li.order>span.service_name”）.html（name.show（）；
$（“li.order>span.service_price”）.html（price.show（）；
});

这接近我想要的。当我点击一个服务时，至少有些东西改变了

要查看代码，请单击任何服务以查看代码是否正常工作。
您的代码存在很多问题，但我认为这是您想要做的事情的开始：

这里有很多问题，但有两个最大的问题：

像编程中的任何其他事情一样，不要给两个不同的东西相同的
id
。永远
若要按id获取元素，请使用符号（
$（“#id”）
），若要按类获取元素，请使用符号（
$（“.class”）
）
非常感谢您花时间改进我编写的代码并指出我的错误。您的JSFIDLE更新非常接近我想要的。