JSFiddle - React, Tailwind, and code Playground

HTML

<form name="pay_is" action="" method="post">
		<table  border="0" align="center">
  <tr>
    <td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="m" value="<?=$fk_merchant_id?>">
<div id="whats">Введите сумму в [РУБ]:</div>
<div id="whats1">
	<input type="text" type="number" value="100"  name="sum" size="7" id="psevdo">
Вы получите <span id="res_sum">10000</span> материала
</div>


</td>
</tr><tr><td>
валюта:&nbsp;&nbsp;
<select size="1" name="service" id="selsel">
<option selected="selected" value="1">рубли</option>
<option value="4"> доллары</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="pay_is" class="sumserf2" value="обменять">
</td></tr>		</table>			
	</form>
  Прошу помощи - как сделать так чтобы:<br>
  1. в строке ВЫ получите все менялось динамически<br>
  2. при переключении на доллары калькулятор calculate2 считал  по курсу долларов var ser_pr = 7000;<br>

JavaScript

document.getElementById('psevdo').addEventListener('keyup', (e) => calculate2(e.target.value));
document.getElementById("selsel").addEventListener("change", function () {
		var opt = this.value;
		var get = document.getElementById('psevdo');
if (opt == 4 ) {
  document.getElementById('whats').innerHTML = "Введите сумму в [USD]: ";
  get.value='500'; 
  calculate2(500);
} else {
	document.getElementById('whats').innerHTML = "Введите сумму в [RUB]: ";
	get.value='100';
  calculate2(100);
}
});
function calculate2(st_q) {
	var min = 0.01;
	var ser_pr = +document.getElementById('selsel').value === 1 ? 100 : 7000;
	var sum_insert = parseFloat(st_q) * ser_pr;
  document.getElementById('res_sum').textContent = sum_insert;
  $('#wm_summ').val(parseFloat(st_q));
}