On click, I need the button to hide and a hidden div to appear

Question

I'm attempting to recreate the form located here: http://yeticustomshop.com/get-quote (PLEASE look at this for reference)

Needed user experience:

• Select Product, product selection is replaced by table showing
  product selection name, checkbox, and quantity selector.
• Option to add another product. If clicked, button disappears and the product selection is shown BELOW the table. Then the process is repeated, adding new selections to table.
• The ability to remove previously selected items.

Here's the fiddle

// 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";
  });
}

Here's my previous post on here

Side note: This process is being used in a form. I'm wondering if it would be possible and easier to almost make it like a shopping cart. I've downloaded simplecart.js, but Javascript is NOT my strong-suit. Please help.