This is the layout for each stat, repeated.... Eg. Shots on Goal

<div id="match-detail_statistic" class="Fk" data-id="match-detail_statistic">
            <div class="hf" data-id="statistic_header">
                <span class="Bk Jo" data-id="statistic_home-stat">14</span>
                <div class="Im" data-id="statistic_stat-name">Shots on Goal</div>
                <span class="Ci" data-id="statistic_away-stat">3</span>
            </div>
            <span>
                <span class="yf" data-testid="match-detail_statistic_stat-bar">
                    <span class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                    <div class="Mf" data-testid="match-detail_statistic_compact-stat-name">Shots on target</div>
                    <span class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                </span>
            </span>
           </div>

As you can see, as my data in the database is 1 stat per row, eg.

Array (
      .....
   [26] => Array
        (
            [fixtureID] => 1035550
            [teamID] => 40
            [HorA] => H
            [type] => Shots on Goal
            [value] => 14
        )

    [27] => Array
        (
            [fixtureID] => 1035550
            [teamID] => 39
            [HorA] => A
            [type] => Shots on Goal
            [value] => 3
        )
etc
)

I'm not sure how to acheive what I desire.