<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dynamic HTML Select Drop Down Using JavaScript</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <select id="countriesDropDown">
   </select>
   <div id="price">
   </div>
   <script>
   const countriesDropDownPk = document.getElementById("countriesDropDown");
   const VPricePk = document.getElementById("price");
   const dataPk = {
       "BUS": "60",
       "TRUCK": "50",
       "CAR": "30",
       "3AXLE": "200"
   }

   for (var keyPk in dataPk) {
       let optionPk = document.createElement("option");
       let optionTextPk = document.createTextNode(keyPk);
       optionPk.setAttribute('value', dataPk[keyPk]);
       optionPk.appendChild(optionTextPk);
       countriesDropDownPk.appendChild(optionPk);
   }

   countriesDropDownPk.addEventListener("change", e => {
       VPricePk.innerHTML = e.target.value;
   })
   </script>
   <style>
       #price {
           color: red;
           width: 100px;
           height: 18px;
           border-style: outset;
       }
   </style>
</body>
</html>

<!-- More HTML code here -->

<div class="service-col">
   <h3>Real Estate Photography</h3>
   <select class="itemselect" id="itemselectPk">
       <option disabled hidden selected>Select Square Footage</option>
       <option value="$100">BUS</option>
       <option value="$125">TRUCK</option>
       <option value="$150">CAR</option>
       <option value="$175">LCV</option>
       <option value="$200">3AXLE</option>
   </select>
   <h4>Price: </h4><input id="outputPk" readonly></span>
   <script>
       const itemselectPk = document.getElementById('itemselectPk');
       const outputPk = document.getElementById('outputPk');

       itemselectPk.addEventListener(
           'change',
           event => outputPk.value = event.target.value
       );
   </script>
</div>