JSFiddle - React, Tailwind, and code Playground

HTML

<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>
<div class="patch-cell">
    <div class="fader-number">test</div>
</div>

<!--example of how I want it to look--->

<div class="patch-cell-test">
    <div class="fader-number">Example  1 A</div>
</div>
<div class="patch-cell-test">
    <div class="fader-number">Example  1 B</div>
</div>
<div class="patch-cell-test">
    <div class="fader-number">Example  2 A</div>
</div>
<div class="patch-cell-test">
    <div class="fader-number">Example  2 B</div>
</div>

CSS

.patching-numbering {
    margin-left:20px;
}

.patch-cell-test {
    margin-top:20px;
}

JavaScript

$('.patch-cell').each(function() {
    var number = ($(this).index() / 2 + 1).toString().split('.');
    $(this).find('.fader-number').append(
        '<span class="patching-numbering">'
        + number[0] 
        + (number[1] !== '5' ? 'A' : 'B')
        + '</span>');
});