How do I in replace "&" with "%20" in HTML

I recently created a code to send an order to WhatsApp but I'm running into trouble trying to make the code send a message.

The issue is that before each input the message gets an & and I need to replace it with %20 in order for it to work with WhatsApp.

I've tried to change the code and nothing seems to work.

My actual code is:

<form action="https://api.whatsapp.com/send?" method="GET" target="_blank" style="text-align: center;">
    <input type="hidden" name="phone" value="56987955586" />
    <input type="hidden" name="" value="" />
    <input type="hidden" name="text" value="" />
    <ul style="list-style: none; padding: 0; display: grid; grid-gap: 10px;">
        <li style="margin-bottom: 10px;">
            <span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 1:</span>
            <input type="number" name="producto1" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" />
        </li>
        <li style="margin-bottom: 10px;">
            <span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 2:</span>

            <input type="number" name="producto2" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" />
        </li>
    </ul>
    <button type="submit" style="background-color: #00c853; color: #ffffff; font-size: 20px; border-radius: 40px; border: none; padding: 15px 30px; margin: 20px auto; display: block; text-transform: uppercase; font-weight: bold;">
        Enviar Pedido por WhatsApp
    </button>
</form>
<style>
@media (min-width: 501px) {
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 801px) {
    ul {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>

If you want to embed the producto values into the text parameter, you'll need some JS in order to do so.

First, replace the name attributes with id so they're not included in the form data and add a class to help identify them

<input
  type="number"
  id="producto1"
  min="0"
  value="0"
  class="text-body"
/>

Then add a submit event listener to collect the values and insert them into the text input value

<form id="whatsapp-form" ...>
  <!-- ... -->
</form>
<script>
document.getElementById("whatsapp-form").addEventListener("submit", (e) => {
  e.target.querySelector("input[name=text]").value = Array.from(
    e.target.querySelectorAll(".text-body"),
    ({ id, value }) => `${id}=${value}`
  ).join(" ");
});
</script>

According to your comments, you do want to attach those input producto[N] values to the message body. In order to get that, you must follow these steps:

1. Stop form submit.
2. Get the producto[N] values.
3. Set those values as the message body.
4. Build the query string.
5. Build the URL.
6. Set URL's query string.
7. Send the message.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const form = document.querySelector("form"),
      phone = form.phone.value;

form.addEventListener("submit", e => {
    //1. Stop form submit
    e.preventDefault();
    
    //2. Get the productos values
    const values = [...form.querySelectorAll("[name^=producto]")].map(elem => elem.previousElementSibling.textContent + elem.value);
	    
    //3. Set those values as the message body
    const text = `Here are the products: ${values.join(", ")}`;
	    
    //4. Build the query string
    const queryString = new URLSearchParams({phone, text});
	    
    //5. Build the URL
    const url = new URL(form.action);

    //6. Set URL's query string
    url.search = queryString;
	    
    //7. Send the message (new tab)
    window.open(url);

    //Optional: location = url; (same tab)
}, false);

<!-- language: lang-css -->

@media (min-width: 501px) {
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 801px) {
    ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

<!-- language: lang-html -->

<form action="https://api.whatsapp.com/send?" method="GET" target="_blank" style="text-align: center;">
    <input type="hidden" name="phone" value="56987955586" />
    <input type="hidden" name="" value="" />
    <input type="hidden" name="text" value="" />
    <ul style="list-style: none; padding: 0; display: grid; grid-gap: 10px;">
        <li style="margin-bottom: 10px;">
            <span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 1:</span>
            <input type="number" name="producto1" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" />
        </li>
        <li style="margin-bottom: 10px;">
            <span style="font-weight: bold; display: inline-block; vertical-align: middle;">Producto 2:</span>
            <input type="number" name="producto2" min="0" value="0" style="margin-left: 5px; width: 70px; display: inline-block; vertical-align: middle;" />
        </li>
    </ul>
    <button type="submit" style="background-color: #00c853; color: #ffffff; font-size: 20px; border-radius: 40px; border: none; padding: 15px 30px; margin: 20px auto; display: block; text-transform: uppercase; font-weight: bold;">
        Enviar Pedido por WhatsApp
    </button>
</form>

<!-- end snippet -->

Thanks Sebastian Simon for the API URL suggest.