Eventlistener not working for iPhone only, works for everything else

I know this question has been asked many times before but I feel that this is a unique bug. I have event listeners that display extra info when clicked or pressed. The functionality works on PC (Chrome), iPad (Safari) but doesn’t work on iPhone (I have something similar on another page which works but the listener is attached to an image (tried that here too)).

I have used click, touch, touchup etc etc but still nothing. Here is my code:

<div class="sub subOne"><h4>Description</h4><img src="{{ "chevron-black-closed.svg" | asset_url }}" style="width:20px;height:20px;"></div>  
<div class="hidden info subOneinfo ">{{ product.description }}</div>

const subOne = document.querySelector('.subOne');
    const subOneinfo = document.querySelector('.subOneinfo');
    const sub2 = document.querySelector('.sub2');
    const sub2info = document.querySelector('.sub2info');
    const sub3 = document.querySelector('.sub3');
    const sub3info = document.querySelector('.sub3info');
    const sub4 = document.querySelector('.sub4');
    const sub4info = document.querySelector('.sub4info');

    const temp = document.querySelector(".temp")

    temp.addEventListener("touchstart", () => subOneinfo.classList.remove("hidden"))

    let open = false

    console.log("HI")

    function handleInteraction(evt) {
        evt.preventDefault()
        if(!open) {
            open = subOneinfo
            subOneinfo.classList.remove("hidden")
        } else if (open == subOneinfo) {
            open.classList.add("hidden")
            open = false
            {% comment %} sub1info.classList.remove("hidden") {% endcomment %}
        } else {
            open.classList.add("hidden")
            open = subOneinfo
            subOneinfo.classList.remove("hidden")
        }
    }

    subOne.addEventListener('touchmove', handleInteraction)
    subOne.addEventListener('click', handleInteraction)