HTMLとCSSで切り替えメニュー表を制作しております。

失礼いたします。
初心者ではありますが、こちらを初めて使わさせていただきますのでご指摘などございましたらお願い致します。

現在メニュー表(WordPress内)HTMLとCSSで作成しております。

参考サイト
http://opus-nine.com/

のメニューを参考に検証から入りHTMLとCSSを得て現在下記のようになっております。

商品選定後に金額が変更されたものが表示されますが、
クリックと反映ができないのはhtmlの記述ミスですか？

【HTMLの記述】

• スマートフォン

• タブレット(10インチまで)

• アップルウォッチ

• ノートパソコンおよび１２インチタブレット
  （両面仕上げはタブレットのみ）

• 眼鏡

• ネックレス・リング・アクセサリー類

• 時計

• 靴

• 財布・バッグ・その他

その他、ヘルメット、ゴーグル、カメラ、フィギュアなど様々なものに加工可能です。お見積もりはお気軽にお申し付けください。

スマホ	スタンダード	プレミアム
片面	¥2,160	¥3,240
両面	¥4,320	¥5,400

タブレット	スタンダード	プレミアム
片面	¥5,400	¥6,480
両面	¥8,640	¥9,720

アップルウォッチ	スタンダード	プレミアム
時計本体	¥3,240	¥4,320
ベルトを含む全体	¥5,400	¥6,480

ノートパソコンおよび１２インチタブレット	スタンダード	プレミアム
片面	¥7,560	¥8,640
両面	¥10,800	¥11,880

眼鏡	スタンダード	プレミアム
全体	¥4,320	¥5,400

ネックレス・リング・アクセサリー類	スタンダード	プレミアム
全体	¥3,240	¥4,320

時計	スタンダード	プレミアム
ベルトを含む全体	¥7,560	¥8,640

靴	プレミアムのみ
靴（メンズ）	¥7,560
靴（レディース）	¥5,400
ショートブーツ（レディース）	¥7,020
ロングブーツ（レディース）	¥8,640
スニーカー（メンズ・レディース共に）	¥3,780
スニーカー（アウトソール込み）	￥5,400

財布・バッグ・その他	プレミアムのみ
財布（小さめのバッグ）	¥5,400
バッグ	¥16,200～
スマホケース	¥5,400
キーケース/名刺入れ	¥3,240
大きめの物	要見積もり

*プレミアムはすべて抗菌仕様になります。

				</div>
			</div>

【CSS】
/* = Init
-------------------------------------------------------------- */
html {
font-size: 62.5%;
}
body,
input,
textarea {
font-size: 1.4rem;
font-weight: 300;
line-height: 1.75;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, verdana, sans-serif;
color: #333;
}
body {
background: #fff;
}

img,iframe {
max-width: 100%;
}

.floatlist {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}

price-menu-list li {

width: 325px;
height: 45px;
border: 1px solid #1ca4cc;
margin: 5px 3px;
text-align: center;
font-size: 1.3rem;
color: #1ca4cc;
line-height: 1.8;
vertical-align: middle;
position: relative;
background: #fff;

}

/* = Common Class
-------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }

.left { float: left; }
.right { float: right; }

.clear {
clear: both;
}
.clearfix {
min-height: 1px;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}

.floatbox {
overflow: hidden;
}
.floatlist {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.floatlist li {
display: inline-block;
font-size: 1.5rem;
vertical-align: top;
}

.img-box {
font-size: 0;
line-height: 1;
text-align: center;
}

@media screen and (min-width: 768px) {
.sp-only {
display: none !important;
}
}

@media screen and (max-width: 767px) {
.pc-only {
display: none !important;
}
}

.menu-table-item table,
.menu-table-item table tr,
.menu-table-item table tr td,
.menu-table-item table tr th {
border-color: #1ca4cc;
color: #1ca4cc;
}

/* Construction Price
-------------------------------------------------------------- */

price-menu-list li {

width: 325px;
height: 45px;
border: 1px solid #1ca4cc;
margin: 5px 3px;
text-align: center;
font-size: 1.3rem;
color: #1ca4cc;
line-height: 1.8;
vertical-align: middle;
position: relative;
background: #fff;

}

price-menu-list li:hover {

cursor: pointer;

}
.btn-enable {
color: #fff !important;
background-color: #1ca4cc !important;
}

price-menu-list li p {

position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;

}
.menu-table-item {
margin-top: 50px;
}
.menu-table-item table,
.menu-table-item table tr,
.menu-table-item table tr td,
.menu-table-item table tr th {
border-color: #1ca4cc;
color: #1ca4cc;
}
.menu-table-item table tr:first-child {
font-weight: bold;
background-color: #1ca4cc;
}
.menu-table-item table tr:first-child td {
color:white;
}
.menu-table-item table tr td {
box-sizing: border-box;
}
.menu-table-item table tr:nth-child(n+2) td {
background: #fff;
}
.menu-table-item table tr td:nth-child(1n) {
width: 333px;
font-size: 15px;
text-align: center;
}
.menu-table-item table tr td:nth-child(2n),
.menu-table-item table tr td:nth-child(3n) {
text-align: center;
width: 333px;
}
.notice {
color: #1ca4cc;
margin-left: 100px;
font-size: 1.2rem;
}
.table-disable {
display: none;
}
.annotation {
color: #b6282c;
font-size: 1.2rem;
text-align: right;
}
@media screen and (max-width: 640px) {
#price-menu-list li {
width: 222px;
height: 80px;
font-size: 15px;
line-height: 20px;
}
.notice {
margin-left: 0;
}
}
/* case
-------------------------------------------------------------- */

construction-list .text-box {

width: 630px;
padding: 20px;
box-shadow: 2px 2px 4px;
background-color: #fff;
position: relative;
z-index: 1;
/*position: absolute;
right: 0;
left: 0;
top: 150px;*/
margin: -100px auto 100px;

}

construction-list .text-box .post-title {

position: relative;
}

construction-list .text-box .post-title::after {

position: absolute;
bottom: -8PX;
left: 0;
content: '';
background: #1ca4cc;
width: 30px;
height: 1px;
}

construction-list img {

width: 100%;

}

construction-list .item-box {

position: relative;
/* padding-bottom: 300px; */

}
@media screen and (max-width: 640px) {
#construction-list .text-box {
width: 400px;
box-sizing: border-box;
/top: 125px;/
margin-top: 20px;
}
#construction-list .item-box {
margin-bottom: 40px;
}
}
@media screen and (max-width: 640px) {
#news-content .news-content-description pre {
white-space: unset;
}
#news-content .category-list .cat-item.cat-item-1 {
text-align: center;
}
#news-content .category-list li {
margin-bottom: 5px;
margin-left: 0;
border: 1px solid #1ca4cc;
width: 227px;
margin-right: 3px;
}
.nav-next,
.nav-previous {
float: none;
position: absolute;
border: 1px solid #1ca4cc;
bottom: -60px;
width: 227px;
}
.nav-next {
right: 10px;
}
.nav-previous {
left: 10px;
}
}

@media only screen and (min-width:768px){
.sp-only{
display: none;
}
}

sns-link{

display: flex;
justify-content: center;
flex-wrap: wrap;
    margin-top: 30px;

}

/* Links
========================================================================== */

/**

• 1. Remove the gray background on active links in IE 10.
• 1. Remove gaps in links underline in iOS 8+ and Safari 8+.
     */

a {
background-color: transparent; /* 1 /
-webkit-text-decoration-skip: objects; / 2 */
}

/**

• Remove the outline on focused links when they are also active or hovered
• in all browsers (opinionated).
  */

a:active,
a:hover {
outline-width: 0;
}