JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/action_page.php">
  <input id="number" type="number" value="20" max="40">
  <input type="text" id="username" name="username" maxlength="10"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#number').addEventListener('input', (e) => {
    e.target.closest('form').querySelector('[name="username"]').maxLength = Number.parseInt(e.target.value);
  });

})