---
    const planResp = await fetch('https://management.beanstalkedu.com/items/game_drawing');
    const planRespJson = await planResp.json();
    const data = planRespJson.data;
    // console.log(data)
---
<main>
    <div class="container mx-auto">
        {data.map((plan: {details2: string | undefined; info: string | undefined; image: string | undefined; slug: string | undefined; name: string | undefined}) =>
            
            <img class="p-4" src={'https://management.beanstalkedu.com/assets/' + plan.image+'download'} alt="" />
            <a onclick="changeBG()" id="markedDownload" class="bg-blue-700 text-white p-4 text-xl rounded-xl active:bg-red-700" href={'https://management.beanstalkedu.com/assets/'+plan.image+'?download'}>Download</a>
        )}
    </div>
</main>
<script is:inline>
    function changeBG(){
        document.getElementById('markedDownload').style.backgroundColor = 'red';
    }
</script>