JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
</span>

JavaScript

var $htA = parseFloat($("#input-q1a").val() != '' ? $("#input-q1a").val() : 0, 10);
    var $avisA = ($htA * 2);
    var $euA = 0;
    var $gaA = ($htA * 3);

    function exposeumfang() {
      $htA = parseFloat($("#input-q1a").val() != '' ? $("#input-q1a").val() : 0, 10);
      $avisA = ($htA * 2);
      $gaA = ($htA * 3);
      if ($gaA <= 8) {
        $euA = 20;
      }
      if ($gaA > 8 && $gaA <= 12) {
        $euA = 24;
      }
      if ($gaA > 12 && $gaA <= 16) {
        $euA = 28;
      }
      if ($gaA > 16 && $gaA <= 20) {
        $euA = 32;
      }
      if ($gaA > 20 && $gaA <= 24) {
        $euA = 36;
      }
      if ($gaA > 24 && $gaA <= 28) {
        $euA = 40;
      }
      if ($gaA > 28) {
        $euA = 44;
      }
    }

    $("label>span").on('click', function() {
      exposeumfang()
      alert('Some text ' + $euA + ' more text ' + $avisA + ' last bit of text.');
    });