Javascript 单击更改图形元素的颜色并添加到显示的美元金额

我希望在页面上有图形元素，每个元素代表相同的美元价值。默认情况下，这些元素将是相同的白色，并且基本美元总额将可见。用户可以点击一个图形元素，改变它的黄色，这样可以增加显示的总金额。他们还应该能够点击黄色的图形元素来停用它，并将其颜色改回白色。此外，在这样做时，从总数中减去-或者至少单击重置按钮将所有元素恢复为默认值

如何对搜索查询进行词组化，以便获得更好的结果或任何有助于我拼凑解决方案的web引用。

这是可行的：

---

如果您能添加一个提琴或代码，我们将能够帮助您。嗨，Sameera，可以。我将研究穆罕默德的建议，并努力使其符合我的需要。完成后，我将在这里发布供审阅。谢谢，穆罕默德，谢谢你的快速反应。我会研究你的建议。我希望进行修改，以便只有一个可见的$total，可能在div.total中，并且每次单击每个.box时只添加/减去一次。所以在上面的例子中，如果三个盒子是黄色的，那么总数是30美元。

var box = $('.box');
var price = 10;
var n = 5;

while (n--) box.clone().appendTo($('body'));

box = $('.box');

box.find('.color').click(function(){ 
    $(this).removeClass('yellow').siblings('p').text(price);
});


box.find('p').text(price).click(function(){
    var val = parseInt($(this).text())+1;
    $(this).text(val);
    if (val>price) $(this).siblings('.color').addClass('yellow');
});