JSFiddle - React, Tailwind, and code Playground

by bndch

HTML

<form>
<input id="multiply" type="text" name="number" value="10">

<input class="result" type="text" name="number" value="3">
<input class="result" type="text" name="number" value="4"> 
<input class="result" type="text" name="number" value="1"> 
<input class="result" type="text" name="number" value="2"> 
</form>

CSS

#multiply {
display:block;
margin-bottom: 20px;
background: #eee;
}
.result {
 display:block;
 margin-bottom: 2px;
}

JavaScript

const multiplyInput = document.querySelector('#multiply');
const resultInputs = document.querySelectorAll('.result');

function inputHandler() {
  resultInputs.forEach( item => {
    item.value = item.value * multiplyInput.value;
  });
}
inputHandler();
multiplyInput.addEventListener('input', inputHandler);