JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
    <h2>Wholesale Factory</h2>
    <div>
        <span>請選擇性別: </span>
        <select id="mySex">
            <option value="mySex00">男裝</option>
            <option value="mySex01">女裝</option>
        </select>
    </div>

    <div>
        <span>請選擇商品: </span>
        <select id="myItem">
            <option value="myItem00">上衣</option>
            <option value="myItem01">外套</option>
            <option value="myItem02">褲子</option>
        </select>
    </div>

    <div>
        <label for="">訂購人:</label>
        <input id="inputName" type="text" placeholder="請輸入姓名" />
    </div>

    <div class="" w3-bar>
        <button class="w3-button w3-teal" onclick="clickBuy()">我要訂購</button>
        <button class="w3-button w3-red" onclick="clickIntro()">認識工廠</button>
    </div>

    <div id="orderTitle"></div>
    <div id="orderName"></div>
    <div id="orderClass"></div>
    <div id="orderItem"></div>
    <div id="orderFinal"></div>
</body>

</html>

CSS

div {
    margin: 5px;
    border: 0;
    padding: 0;
}

#inputName {
    caret-color: green;
    outline-color: blue;
}

JavaScript

function clickBuy() {
    //------------您的訂單-----------
    document.getElementById('orderTitle').textContent = "------------訂單明細-----------";

    //從網頁抓顧客姓名，並在alert顯示出來
    const name1 = document.getElementById('inputName').value;
    alert('「' + name1 + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！」');
    //畫面顯示出顧客姓名
    document.getElementById('orderName').textContent = "顧客姓名:" + name1;

    //抓客戶選的類別，並在網頁上顯示
    var selectMySex = document.getElementById("mySex");
    var index = selectMySex.selectedIndex;
    var text = selectMySex.options[index].text;

    //根據性別給出不同推銷訊息
    if (text == "男裝") {
        alert("我們將贈送您帥氣領帶！");
    }
    if (text == "女裝") {
        alert("我們將贈送您美麗圍巾！");
    }

    document.getElementById('orderClass').textContent = "服裝類別:" + text;

    //抓客戶選的類型，並在網頁上顯示
    var selectMyItem = document.getElementById("myItem");
    var index = selectMyItem.selectedIndex;
    var text = selectMyItem.options[index].text;
    document.getElementById('orderItem').textContent = "服裝類型:" + text;

    //Order最底下-------------------------------
    document.getElementById('orderFinal').textContent = "-------------------------------";
}

function clickIntro() {
    alert('「我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！」');
}