Custom line properties for products not working

I am using the Thalia theme and I am trying to add some custom line properties to my products (eg message box, radio buttons) but they are not saving to the product. I wonder if it is because of something in the Thalia theme that is affecting it.

The dropdown selector and short text field work fine. However the textarea message box and radio buttons are not working.

This is the code that I added to the product page between the “form” tags:

        <label>Box Type:</label><br>
        <input type="radio" name="properties[Box Typex]" value="Cool Cream"> <span>Cool Cream</span><br>
        <input type="radio" name="properties[Box Typex]" value="Classic Black"> <span>Classic Black</span><br>
      </p>
      
      
      <div class="break p-t-10"></div>
      <p class="line-item-property__field">
      <label for="to">To:</label>
      <input id="to" type="text" 
             style="border-bottom:1px solid #e6e6e6 !important"
             name="properties[To]">
    </p>
            <div class="break"></div>
              <p class="line-item-property__field">
      <label for="from">From:</label>
      <input id="from" type="text" 
             style="border-bottom:1px solid #e6e6e6 !important"
             name="properties[From]">
    </p>
      <div class="break"></div>

            <p class="line-item-property__field">
      <label for="custom-message">Message</label>
            <div class="break"></div>
      <textarea id="custom-message" rows="4" cols="50" maxlength="350" 
                style="border:1px solid #e6e6e6"
                name="properties[Custom Message]"></textarea>
    	</p>
      <div class="break p-t-10"></div>
		
      {% include 'custom-collection-filters' %}
          
              <p class="line-item-property__field">
      <label for="whats-the-occasion">What's the occasion?</label><br>
      <select id="whats-the-occasion" 
              style="border:1px solid #e6e6e6; color:#888888;"
              name="properties[What's the occasion?]">
              {% for type in occasion_tags %}
              <option value="{{ type }}">
                  {% assign words = type | split: '-' %}
                {% for word in words %}{{ word | capitalize }} {% endfor %}
                </option>        
              {% endfor %}
      </select>

    </p>

For anyone wondering, I found the root cause. I still don’t know how to fix it but it is definitely because of the javascript in this theme.

In the product page, where it says

<button type=“submit” name=“add” id=“button-cart”

if you remove this line id=“button-cart”, the line item properties work perfectly. I don’t know what consequences this will cause but I only need the properties for a few items in my collection so hopefully it will be okay.