JSFiddle - React, Tailwind, and code Playground

HTML

<div id="usd">usd</div>
<div id="eur">eur</div>
<div id="clr"></div>
<br>
<br>


user quantity 1-200:
<input type="text" id='user-quantity'>
<br>
<br>
user quantity total sum
<input type="text" id='total-sum'>

CSS

#usd, #eur{
  cursor: pointer;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  float: left;
}
.greenChacked{
  background-color: olive;
}
#clr{
  clear: both;
}

JavaScript

$(document).ready(function(){

  $('#user-quantity').keyup(function(){
    userQuantity = parseInt($(this).val());
    if( userQuantity >=1 && userQuantity <=200){
      setCurrency();
    } else {
      $('#total-sum').val("error");
    }
  });
    
  $('#usd').on('click', function(){
    $('#eur').removeClass('greenChacked');
    $(this).addClass('greenChacked');
    setCurrency();
  });
  $('#eur').on('click', function(){
    $('#usd').removeClass('greenChacked');
    $(this).addClass('greenChacked');
    setCurrency();
  });
  $('#usd').trigger('click');

  function setCurrency(){
    if( $('#usd').hasClass('greenChacked') ){
      var usdCurr = userQuantity * 10 + 'doll';
      $('#total-sum').val(usdCurr);
    }
    if( $('#eur').hasClass('greenChacked') ){
      var eurCurr = userQuantity * 5 + 'eur';
      $('#total-sum').val(eurCurr);
    }
  }

});