Create Shopify custom product page

I want to replicate the size chart functionality on this page: [login to view URL] Just the Top Size and Bottom Size functionality (users can pick a combination). I have a test Shopify store for you to do development in. Shopify doesn't have this functionality out of the box, so I made the product sizes have all the combinations of top and bottoms. [login to view URL] I need someone who can use JS to make my test page appear to have 2 sizes like the swimsuitsforall site. So the Page will have: Top Size: S (2-4) | M (6-8) | L (10-12) | XL (12-14) | 1X (14-16) | 2X (18-20) Bottom Size: S (2-4) | M (6-8) | L (10-12) | XL (12-14) | 1X (14-16) | 2X (18-20) ^^ Ignore the | in the above example, that's just to show the sizes. These will be buttons created with JS , and when the user clicks on the buttons, it will select the actual size. For example, if the user clicks on the XL (12-14) top size and 1X (14-16) bottom size, then the product selected would be "Top: XL (12-14); Bottom: 1X (14-16)" If a product combination isn't available, then we won't show the button. So for example, if "Top: XL (12-14); Bottom: 1X (14-16)" isn't available, then clicking XL (12-14) top size will disable the button for 1X (14-16) bottom size. This is really just a JS project, but it requires knowledge of Shopify.