<ul class="form-section">
 <li class="form-line" >
  <label for="WG_Collected">WG Collected</label>
  <div>
  <input type="number" id="WG_Collected" name="WG_Collected" value="15.0" min="0" step="0.1" required>
  </div>
 </li>
 <li class="form-line" >
  <label for="Proof">Proof</label>
   <div>
   <input type="number" id="Proof" name="Proof" Value="79.4" min="0" step="0.1" required>
   </div>
 </li>
 <li class="form-line" >
  <label for="PG_Collected">PG Collected</label>
   <div>
   <textarea type="number" id="PG_Collected" name="PG_Collected"></textarea>
   </div>
  <input type="button" value="Calculate PG" id="submitButton" />
 </li>
</ul>

var button = document.getElementById("submitButton");
button.addEventListener("click", function() {
 var num1 = document.getElementById('WG_Collected').value;
 var num2 = document.getElementById('Proof').value;
 var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
 document.getElementById('PG_Collected').innerHTML = PG_Collected.toFixed(2);
 }, true);