click() doesn't work as enter the button by mouse manually

I am writing a Chrome extension so it will automatically do things when I enter a website, everything is working good so far except 1 problem.

There is an text input so I can put in the value and enter another button, it is working well when I do manually by hand and mouse. But when it comes to coding, it is not working as I wanted. The code is as below:

  var   content = document.getElementsByClassName("groupButton")[0];
  var kbButtons = content.getElementsByTagName("button");

 // add mouse event for input 
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('click', {bubbles: true}));
  
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
    
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
  
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('orientationchange', {bubbles: true}));
    document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('mousemove', {bubbles: true}));

 
  // add keyboard button for input  
  setTimeout(() => {
  const el = document.querySelector('input#InputNumber');
  el.focus();
  for (const type of ['blur','focusin','focusout','keydown', 'keypress', 'keyup'])
    el.dispatchEvent(new KeyboardEvent(type, {bubbles: true}));
  document.execCommand('insertHTML', false, '70');
},4000);


  // click on button
    setTimeout(function(){ 
    
    kbButtons[0].dispatchEvent(new MouseEvent('click', {bubbles: true}));
  }, 5000);

the function click() is working well but it doesnt catch value from the input that I set as 50. It is just always 10 as it is from the beginning. I dont know why this is happening? If somebody can help me can we do a teamviewer session? Since the website needs login credential and I can do this so you can help me soon.

Thanks a lot and look forward to hearing from everybody who has this experience.