Help with script

Hi,

I'm trying to fix a functionality issue with some code. What I'm basically trying to do is to make a red square turn green when a specific product quantity selector's value is 2 or more. Here is the code I'm currently using : 

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Replace 'your-product-id' with the actual ID of your product block
    var productBlock = document.getElementById('block-yui_3_17_2_1_1706114078580_5010');

    if (productBlock) {
      // Find the quantity selector within the product block
      var quantitySelector = productBlock.querySelector('.product-quantity-input');

      // Find or create the square element
      var square = productBlock.querySelector('.custom-square');
      if (!square) {
        square = document.createElement('div');
        square.className = 'custom-square';
        productBlock.appendChild(square);
      }

      // Function to update the square color based on the quantity
      function updateSquareColor() {
        // Use input event instead of change
        var quantity = parseInt(quantitySelector.value, 10);

        // Update the square color based on the quantity
        square.style.backgroundColor = quantity > 1 ? 'green' : 'red';
      }

      // Attach the update function to the input event
      quantitySelector.addEventListener('input', updateSquareColor);

      // Initial color update
      updateSquareColor();
    }
  });
</script>
 

I used ChatGPT to make that code since I don't have the required knowledge in JavaScript yet. The red square appears, but it doesn't turn green when the quantity is changed (either to 2 or more). 

I would like some help to find out what's not working and how to fix it, or if there are any other solutions.

Here is the URL : www.judorivesud.com/test-1
Here is the password : test-1-jrs

Thank you