JSFiddle - React, Tailwind, and code Playground

HTML

<label >訂購人:</label>
<input type="text" placeholder="輸入姓名">

<label for='clothing-class'>服裝分類：</label>
<select name="clothing-class" id="clothing-class">
  <option value="女裝">女裝</option>
  <option value="男裝">男裝</option>
</select>

<label for='clothing-type'>服裝類型：</label>
<select name="clothing-type" id="clothing-type">
  <option value="上衣">上衣</option>
  <option value="外套">外套</option>
  <option value="下身">下身</option>
</select>
<label >訂購數量:</label>
<input type="number" class='num' placeholder="輸入數量" min=1>
<button class='buy'  onclick=buyBtn()>我要訂購</button>
<button class='factory' onclick=factoryBtn()>認識工廠</button>
<div class='order'>
<h1>您的訂單</h1>
<p class='customer-name'>顧客姓名：</p>
<p class='clothing-class-value'></p>
<p class='clothing-type-value'></p>
  <p class='quantity'></p>
<p class='price'></p>
</div>

CSS

button{
border-radius:50%;
width:100px;
height:100px;
background-color:#66a80f;
border:none;
color:#333;
font-weight:bold;
margin:10px;
transition:all 0.3s;

}
button:hover,button:active{
  background-color: #82c91e;
  cursor:pointer;

}
.order{
  border:1px solid #222;
  padding:5px;
}

JavaScript

function buyBtn(){
		let inpuText= document.querySelector('input').value;
		alert(`${inpuText}謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`);

    let customerName= document.querySelector('.customer-name')
    customerName.textContent =`顧客姓名：${inpuText}`

    let clothingClass=document.querySelector('#clothing-class')
    let clothingClassIndex=clothingClass.selectedIndex
    let clothingClassValue=clothingClass.options[clothingClassIndex].value
    
    let num=document.querySelector('.num').value
    document.querySelector('.quantity').textContent=`訂購數量:${parseInt(num)}`
    
    if(clothingClassValue=='男裝'){
       alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！')
        
       document.querySelector('.price').textContent=`初步估價:NT${600*parseInt(num)}`
       }
    else{
       alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！')
       document.querySelector('.price').textContent=`初步估價:NT${500*parseInt(num)}`
       }
    document.querySelector('.clothing-class-value').textContent=`服裝分類：${clothingClassValue}`
                        
    let clothingType=document.querySelector('#clothing-type')
    let clothingTypeIndex=clothingType.selectedIndex
    let clothingTypeValue=clothingType.options[clothingTypeIndex].value
    document.querySelector('.clothing-type-value').textContent=`服裝類型：${clothingTypeValue}`
}
function factoryBtn(){
		alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')
}