I have a WordPress product with the specific product number ‘121’ in WooCommerce. I created the product page using Elementor single product page template. On this page, there are two input fields. What I want to achieve is that when the ‘Add to Cart’ button is clicked, the input from these fields is sent to my API. The page will then wait for the API response, which will trigger a popup displaying the response. Within this popup, there will be a new ‘Add to Cart’ button that functions as the standard add to cart button does.
Image Example

I’ve tried getting help from various AI tools, but they didn’t really solve my problem. I’m not very experienced in this area. I attempted something simple, like hiding the ‘Add to Cart’ button with CSS and showing it in an Elementor popup. It almost worked, but the ‘Add to Cart’ button in the popup isn’t working. My API endpoint is: https://example.com/api.php?id=12&size=38.

HTML Code of each element:
Add to cart button:

<button type="submit" name="add-to-cart" value="121" class="single_add_to_cart_button button alt wp-element-button">Add to cart</button>

Two fields

<input type="text" name="ppom[fields][user_id]" id="user_id" class="form-control text ppom-input ppom-required" placeholder="User ID." autocomplete="off" data-type="text" data-data_name="user_id">

<input type="text" name="ppom[fields][size_id]" id="size_id" class="form-control text ppom-input ppom-required" placeholder="Size ID." autocomplete="off" data-type="text" data-data_name="size_id">

One thing to mention: I have the Code Snippets plugin. If anyone provides me with code, I can easily add it to the plugin, which will make things clearer for both of us.

Any kind of suggestion would be helpful for my progress.