Why the value didn't set but the dispatch event run?

Question

i have this code to set an input then click the button. i tried run the code by removing the dispatchEvent and num is set, when i run it with the dispatchEvent it didn't set the input value but the dispatchEvent works. Should i add a delay to execute set value then dispatchEvent? or separate it? How to fix this? Thank you!

const inits = function(){
  const injectElement = document.createElement('div');
  injectElement.className = "my-button";
  injectElement.id = "bigBtn";
  $('body').append(injectElement);

  spn = '<span class="big-span"></span><span class="small-span">Auto Fill</span><button class="btn btn-white" id="fillBtn" type="button">Fill</button>'
  $('#bigBtn').append(spn);
}
inits();

$('#fillBtn').click(function (e) { 
  e.preventDefault();
  num = 123;
  document.querySelector('input.arco-input').value = num;
  document.querySelector('.i18n-icon-search').dispatchEvent(new Event('click',{bubbles:true}));
});