javascript - 单击时，我需要隐藏按钮并显示隐藏的 div

Question

我正在尝试重新创建位于此处的表单：http: //yeticustomshop.com/get-quote（请查看此以供参考）

需要的用户体验：

• 选择产品，产品选择将替换为显示
  产品选择名称、复选框和数量选择器的表格。
• 添加其他产品的选项。如果单击，按钮会消失，产品选择会显示在表格下方。然后重复该过程，将新的选择添加到表中。
• 删除以前选择的项目的能力。

这是小提琴

// Get all the product radio buttons and loop them
var products = document.getElementsByName('product');
for (var i = products.length; i--;) {
  // add an event listener to do stuff when one of them is clicked
  products[i].addEventListener("click", function() {
    // get the value of the clicked button
    var cup = this.value;
    // put the value in the input box
    document.getElementById('yourSelection').value = cup;
    // hide the radio buttons and show the table
    document.getElementById("cupDesc").style.display = "block";
    document.getElementById("addProductBtn").style.display = "block";
    document.getElementById("cupSelect").style.display = "none";
  });
}

这是我以前的帖子在这里

旁注：此过程以表格形式使用。我想知道是否可以更容易地将其制作成购物车。我已经下载了 simplecart.js，但 Javascript 不是我的强项。请帮忙。