XF 2.1 How do I get the reaction count of a specific reaction in a post?

[Mad Otter Games]

I am trying to make the reaction summary in a post show the number of each reaction next to their icon. This is the current state of my reactionSummary template:

<xf:macro name="summary" arg-reactionIds="!">
    <xf:if contentcheck="true">
        <ul class="reactionSummary">
        <xf:contentcheck>
            <xf:foreach loop="$reactionIds" value="$reactionId"><xf:trim>
                <li><span class="reactionCount"> {$reactionId|number}</span><xf:reaction id="{$reactionId}" small="true" /></li>
            </xf:trim></xf:foreach>
        </xf:contentcheck>
        </ul>
    </xf:if>
</xf:macro>

<xf:macro name="summary" arg-reactionIds="{$reactionIds}" />

It appears that {$reactionId|number} just grabs the ID of the reaction type and not the current count - I'm assuming that this template is only passed IDs and not the actual data on the reaction instances. How can I get the amount of that kind of reaction inserted in that spot?

 

[Mad Otter Games]

So I managed to sort of get this working by taking the entire code block out of the reactionSummary template and put it right in the post template instead, as such:

<xf:if contentcheck="true">
    <ul class="reactionSummary">
        <xf:contentcheck>
            <xf:foreach loop="$post.reactions" key="$reactionID" value="$reaction"><xf:trim>
                <li><xf:reaction id="{$reactionID}" small="true" /><span class="reactionCount"><span class="reactionCountSmall">x</span>{$reaction}</span></li>
            </xf:trim></xf:foreach>
        </xf:contentcheck>
    </ul>
</xf:if>

However, while this correctly grabs the counts, it doesn't work at all with automatically refreshing when the user likes/dislikes something, and seems like an inelegant solution overall. I think I'm probably missing something obvious here, what would be the appropriate way to do this?

 

[Tony Cossio]

So I managed to sort of get this working by taking the entire code block out of the reactionSummary template and put it right in the post template instead, as such:

<xf:if contentcheck="true">
    <ul class="reactionSummary">
        <xf:contentcheck>
            <xf:foreach loop="$post.reactions" key="$reactionID" value="$reaction"><xf:trim>
                <li><xf:reaction id="{$reactionID}" small="true" /><span class="reactionCount"><span class="reactionCountSmall">x</span>{$reaction}</span></li>
            </xf:trim></xf:foreach>
        </xf:contentcheck>
    </ul>
</xf:if>

However, while this correctly grabs the counts, it doesn't work at all with automatically refreshing when the user likes/dislikes something, and seems like an inelegant solution overall. I think I'm probably missing something obvious here, what would be the appropriate way to do this?

Did you ever figure this out, and do you have a script and instructions? Thanks.