Twitch/ html/ css/ streamlabs: need help displaying specific user badge (instead of all of them) within my chatbox using streamlabs html and css code

Question

(code below)

I'm not incredibly familiar with either two languages, but I am able to inspect html elements in google to pinpoint what it is I wish to use:

<span data-provider="twitch" data-badge="subscriber" data-version="3012" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="1"></span>

from

<span class="chat-line__message--badges"><span data-provider="twitch" data-badge="broadcaster" data-version="1" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="0"></span><span data-provider="twitch" data-badge="subscriber" data-version="3012" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="1"></span><span data-provider="twitch" data-badge="no_video" data-version="1" class="ffz-tooltip ffz-badge" data-tooltip-type="badge" data-badge-idx="2"></span></span>

My current code below, however pulls all badges instead of the one I specifically need (subscriber badge) resulting in the following chatbox: All 3 badges appear next to chatter name instead of the specific one I want

I apologize if I am asking this question incorrectly as I am new to css and html in general. But I can clarify anything if needed. Code Below:

(error) I ended up with this:

enter image description here

(goal) But I want this:

enter image description here

html:

<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}">
    <span class="meta" style="color: {color}">
      <span class="badges"> 
       </span>
      <span class="name">{from}</span>
    </span>
<br>
    <span class="message">
      {message}
    </span>
  </div>
</script>

css:

@font-face {
    font-family: 'final_fantasy_viiregular';
    src: url(data:application/font-woff2;charset=utf-**"VERY LONG FONT CSS IMPORT REMOVED FOR CLARITY"**;
    font-weight: normal;
    font-style: normal;

}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    text-shadow: 7px 7px #000;
    background: {background_color};
    font-family: 'final_fantasy_viiregular';
    font-weight: 600;
    font-size: 100px;
    line-height: .5em;
    color: {text_color};
}


#log>div {
    animation: fadeInUp .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
    -webkit-animation: fadeInUp .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}

.colon {
    display: none;
}

#log {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 10px;
    width: 100%;
}

#log .emote {
        display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 0em 0.2em;
    position: relative;
}

#log .emote img {
  
    height: 1em;
    opacity: 0;
}

#log .message,#log .meta {
    vertical-align: top;
    display: inline;
    padding-bottom: 0.1em;
}

#log .meta {
    text-align: left;
    padding-right: 0.5em;
}

#log .message {
    word-wrap: break-word;
}

.badge {
  height: 1em;
     text-shadow: 7px 7px #000;
    background: {background_color};
}

.name {
 height: 2em;
  color: cyan;
     text-shadow: 10px 10px #000;
  
}