JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>ONLINE ORDE</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div class="order">
      <h1>- ONLINE ORDER -</h1>
      <div class="name">
        <label for="">顧客姓名</label>
        <input id="name" type="text" placeholder="請輸入姓名..." required />
      </div>

      <div class="classify">
        <label for="">服裝分類</label>
        <select name="" id="Cclassify">
          <option value="man">MAN</option>
          <option value="lady">LADY</option>
        </select>
      </div>

      <div class="type">
        <label for="">服裝類型</label>
        <select name="" id="Ctype">
          <option value="Coat">外套</option>
          <option value="T-shirt">T恤</option>
          <option value="trouser">褲子</option>
        </select>
      </div>
      <div class="orderCount">
        <label for="">訂購數量</label>
        <div class="ocbtn">
          <button id="ocsub">-</button>
          <span id="ordercountnumber">1</span>
          <button id="ocadd">+</button>
        </div>
      </div>
      <div class="card">
        <button onclick="myFunction()">我要訂購</button>
        <button onclick="myFactory()">認識工廠</button>
      </div>
      <div class="ordertext" id="ordertext">
        <div class="ordertitle">
          <h2>您的訂單</h2>
        </div>

        <ul class="ordername">
          <li>顧客姓名:<span id="ordername"></span></li>
          <li>服裝分類:<span id="orderclassify"></span></li>
          <li>服裝類型:<span id="ordertype"></span></li>
          <li>訂購數量:<span id="orderCount"></span>件</li>
         ...

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
}

body {
  background: lightblue;
}

.order {
  margin: 50px auto;
  background: rgba(119, 136, 153, 0.5);
  width: 500px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

p {
  margin: 10px 0;
  font-size: 12px;
}

li {
  list-style-type: none;
  font-size: 12px;
}

label {
  font-size: 12px;
  margin-bottom: 10px;
}

input {
  width: 180px;
}

.name {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name > input {
  border: 0;
  border-radius: 50px;
  padding: 2px 10px;
  background-color: white;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card > button {
  margin: 20px;
  width: 150px;
  padding: 10px;
  background: lightgray;
  color: white;
  border-radius: 50px;
  border: 2px solid gray;
}

button:hover {
  background: white;
  color: lightblue;
  border: 2px dashed lightblue;
  font-weight: 800;
}

.classify {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.type {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.orderCount {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ocbtn > button {
  width: 35px;
  margin: 0 20px;
  border-radius: 50px;
}
select {
  width: 200px;
  border: 0;
  border-radius: 50px;
  padding: 2px 10px;
  background-color: white;
}

.ordertext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ordertitle {
  border-bottom: 3px solid lightslategray;
  color: white;
}

.ordername {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:...

JavaScript

// DOM
var ordername = document.getElementById("ordername");
var Cclassify = document.getElementById("Cclassify");
var Ctype = document.getElementById("Ctype");
var ordertype = document.getElementById("ordertype");
var orderCount = document.getElementById("orderCount");
var orderPrice = document.getElementById("orderPrice");
// +-訂購數量
var ocadd = document.getElementById("ocadd");
var ordercountnumber = document.getElementById("ordercountnumber");
var ocsub = document.getElementById("ocsub");

// +-訂購數量
// ocadd.addEventListener("click", function () {
//   oredrname.innerText = Number(oredrname.value) + 1;
// });
ocadd.addEventListener("click", function () {
  ordercountnumber.innerText = Number(ordercountnumber.innerText) + 1;
});
ocsub.addEventListener("click", function () {
  // 限制最低數量是1件
  if (Number(ordercountnumber.innerText) > 1) {
    ordercountnumber.innerText = Number(ordercountnumber.innerText) - 1;
  }
});
// 按我要訂購
function myFunction() {
  var name = document.getElementById("name").value;
  var CclassifyIndex = Cclassify.selectedIndex;
  var CtypeIndex = Ctype.selectedIndex;
  var CclassifyText = Cclassify.options[CclassifyIndex].text;
  var CtypeText = Ctype.options[CtypeIndex].text;
  alert(
    name +
      "您好！!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！"
  );
  ordername.textContent = name;
  orderclassify.textContent = CclassifyText;
  ordertype.textContent = CtypeText;
  var CclassifyMan = "MAN";

  // 如果選男裝:跳送領帶通知&價格600$
  if (CclassifyText == CclassifyMan) {
    alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
    orderPrice.textContent = parseInt(ordercountnumber.innerText) * 600;
  } else {
    // 如果選女裝:跳送圍巾通知&價格500$
    alert("近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！");
    orderPrice.textContent = parseInt(ordercountnumber.innerText) * 500;
  }
  //  訂購數量顯示
  orderCount.textContent = ordercountnumber.innerText;
}

// 按認識工廠
function myFactory() {
  var name = document.getElementById("name").value;
  alert(
    name + "您好！!我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！"
...