JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: none;">
  <input type="text" maxlength="1">
</div>
<button class="b1">b1</button>
<button class="b2">b2</button>
<button class="b3">b3</button>

JavaScript

var input = document.querySelector('input');
var div = document.querySelector('div');
var b1 = document.querySelector('.b1');
var b2 = document.querySelector('.b2');
var b3 = document.querySelector('.b3');

b1.onclick = e => {
  input.setAttribute('maxlength', 2);
  div.style.display = 'block';
};

b2.onclick = e => {
  div.style.display = 'none';
};

b3.onclick = e => {
  input.setAttribute('maxlength', 4);
  div.style.display = 'block';
};