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

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

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

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

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

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



【HTMLの記述】

<div class="item-container">
					<ul id="price-menu-list" class="floatlist">
						<li class=""><p>スマートフォン</p></li>
						<li class=""><p>タブレット(10インチまで)</p></li>
						<li class=""><p>アップルウォッチ</p></li>
						<li class="btn-enable">ノートパソコンおよび１２インチタブレット<br>（両面仕上げはタブレットのみ）</li>
						<li class=""><p>眼鏡</p></li>
						<li class=""><p>ネックレス・リング・アクセサリー類</p></li>
						<li class=""><p>時計</p></li>
						<li class=""><p>靴</p></li>
						<li class=""><p>財布・バッグ・その他</p></li>
					</ul>
					<p class="notice">その他、ヘルメット、ゴーグル、カメラ、フィギュアなど様々なものに加工可能です。お見積もりはお気軽にお申し付けください。</p>
					<div id="menu-table-container">
						<!-- スマートフォン -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>スマホ</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>片面</td>
									<td>¥2,160</td>
									<td>¥3,240</td>
								</tr>
								<tr>
									<td>両面</td>
									<td>¥4,320</td>
									<td>¥5,400</td>
								</tr>
							</tbody></table>
						</div>
						<!-- タブレット -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>タブレット</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>片面</td>
									<td>¥5,400</td>
									<td>¥6,480</td>
								</tr>
								<tr>
									<td>両面</td>
									<td>¥8,640</td>
									<td>¥9,720</td>
								</tr>
							</tbody></table>
						</div>
					<!-- アップルウォッチ-->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>アップルウォッチ</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>時計本体</td>
									<td>¥3,240</td>
									<td>¥4,320</td>
								</tr>
								<tr>
									<td>ベルトを含む全体</td>
									<td>¥5,400</td>
									<td>¥6,480</td>
								</tr>
							</tbody></table>
						</div>
						<!-- PC or 12inch -->
						<div class="menu-table-item">
							<table>
								<tbody><tr>
									<td>ノートパソコンおよび１２インチタブレット</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>片面</td>
									<td>¥7,560</td>
									<td>¥8,640</td>
								</tr>
								<tr>
									<td>両面</td>
									<td>¥10,800</td>
									<td>¥11,880</td>
								</tr>
							</tbody></table>
						</div>
						<!-- 眼鏡 -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>眼鏡</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>全体</td>
									<td>¥4,320</td>
									<td>¥5,400</td>
								</tr>
							</tbody></table>
						</div>
						<!-- ネックレス・リング・アクセサリー類 -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>ネックレス・リング・アクセサリー類</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>全体</td>
									<td>¥3,240</td>
									<td>¥4,320</td>
								</tr>
							</tbody></table>
						</div>
						<!-- 時計 -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>時計</td>
									<td>スタンダード</td>
									<td>プレミアム</td>
								</tr>
								<tr>
									<td>ベルトを含む全体</td>
									<td>¥7,560</td>
									<td>¥8,640</td>
								</tr>
							</tbody></table>
						</div>
						<!-- 靴 -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>靴</td>
									<td>プレミアムのみ</td>
								</tr>
								<tr>
									<td>靴（メンズ）</td>
									<td>¥7,560</td>
								</tr>
								<tr>
									<td>靴（レディース）</td>
									<td>¥5,400</td>
								</tr>
								<tr>
									<td>ショートブーツ（レディース）</td>
									<td>¥7,020</td>
								</tr>
								<tr>
									<td>ロングブーツ（レディース）</td>
									<td>¥8,640</td>
								</tr>
								<tr>
									<td>スニーカー（メンズ・レディース共に）</td>
									<td>¥3,780</td>
								</tr>
								<tr>
									<td>スニーカー（アウトソール込み）</td>
									<td>￥5,400</td>
								</tr>
							</tbody></table>
						</div>
						<!-- 財布・バッグ -->
						<div class="menu-table-item table-disable">
							<table>
								<tbody><tr>
									<td>財布・バッグ・その他</td>
									<td>プレミアムのみ</td>
								</tr>
								<tr>
									<td>財布（小さめのバッグ）</td>
									<td>¥5,400</td>									
								</tr>
								<tr>
									<td>バッグ</td>
									<td>¥16,200～</td>									
								</tr>
								<tr>
									<td>スマホケース</td>
									<td>¥5,400</td>									
								</tr>
								<tr>
									<td>キーケース/名刺入れ</td>
									<td>¥3,240</td>									
								</tr>
								<tr>
									<td>大きめの物</td>
									<td>要見積もり</td>									
								</tr>
							</tbody></table>
						</div>
						<p class="annotation">*プレミアムはすべて抗菌仕様になります。</p>

					</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.
 * 2. 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;
}