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>
    <h3>Wholesale Factory</h3>
    <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>------------您的訂單-----------</div>
    <div id="orderName">顧客姓名:</div>
    <div id="orderClass">服裝類別:</div>
    <div id="orderItem">服裝類型:</div>
    <div>-------------------------------</div>
</body>

</html>

CSS

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

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

JavaScript

//擷取客戶選擇的性別
function showSex() {
    var selectMySex = document.getElementById("mySex");
    var index = selectMySex.selectedIndex;
    var value = selectMySex.options[index].value;
    var text = selectMySex.options[index].text;
    return text;
}

function showItem() {
    var selectMyItem = document.getElementById("myItem");
    var index = selectMyItem.selectedIndex;
    var value = selectMyItem.options[index].value;
    var text = selectMyItem.options[index].text;
    return text;
}

function clickBuy() {
    //從網頁抓顧客姓名，並在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;
    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;

}

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