Having issue to pass the value from ui.html to code.js

Hi, I’m working on a plugin that features two input fields in the UI. The plugin is designed to create frames based on the values entered by the user. However, I’m encountering issues passing values from ui.html to code.js. I’m wondering what might be wrong with my code.

<div class="input-group">
     <input type="number" id="aspect-ratio-1" name="fname" min="1" max="10000">
     <button class="link-arrow" id="reverse-button">🔄</button>
     <input type="number" id="aspect-ratio-2" name="fname" min="1" max="10000">      
</div>

<script>
  const input1 = document.getElementById('aspect-ratio-1');
  const input2 = document.getElementById('aspect-ratio-2');

const createFrame = document.getElementById('create-frame'); // i have a button on top of the input field for create frame 

  createFrame.addEventListener("click", function() {
    const width = input1.value;
    const height = input2.value;
    parent.postMessage({ pluginMessage: { type: 'create-frame', width: width, height: height } }, '*');
  });
</script>

figma.showUI(__html__, {width: 360, height: 640})

figma.ui.onmessage = msg => {
    if (msg.type === 'create-frame') {
        const { width, height } = msg.pluginMessage;
        const frame = figma.createFrame();
        frame.x = 50;
        frame.y = 50;
        frame.resize(width, height);
    }

}