Loop through liquid advanced custom field to return multiple metafield values

[graemebryson]

I've built the following liquid for loop to retrieve & output data from a repeating advanced custom field in Shopify. The ACF namespace is faq, and contains heading and content data. My current loop is as follows:

<div class="feed-faqs">

    {% if page.metafields.faq != blank %}

        {% assign faqs = page.metafields.faq %}

        {% for item in faqs %}

            {% assign i = forloop.index %}
            
            <div class="item item--{{ i }}">
                {{ heading[i] }}
                {{ content[i] }}
            </div>
            
        {% endfor %}

    {% endif %}

</div>

However, on the frontend, this loop returns the following:

<div class="feed-faqs">
    <div class="item item--1">            
    </div>            
    <div class="item item--2">            
    </div>
</div>

Is what I'm trying to achieve (to output multiple values from a repeating ACF field) possible with this approach, and if so, where have I gone wrong in fetching the header & content data?