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;
    var letter = $(this).index() % 2 === 0 ? 'A' : 'B';
    $(this).find('.fader-number').append(
        '<span class="patching-numbering">'
        + Math.floor(number) 
        + letter 
        + "</span>");
});