JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <span id="dupe1" class="foo"></span>
    <span id="dupe2" class="foo"></span>
    <span id="dupe3" class="bar"></span>
    <span id="dupe3" class="bar"></span>
    <span id="dupe1" class="foo"></span>
    <span id="dupe4" class="baz"></span>
    <span id="dupe2" class="foo"></span>
    <span id="dupe1" class="foo"></span>
</div>

JavaScript

$.fn.fixDupes = function() {
    var cls = this.attr('class');
    $('.' + cls).each(function() {
        var me = this;
        var id = $(me).attr('id');
        var dupes = $('#' + id + '.' + cls);
        dupes.each(function() {
            if(this != me) {
                $(this).attr('id', id + '_r_' + Math.random());
            }
            else {
                $(this).attr('id', id + '_o');
            }
        });
    });
    
    return this;
};

$('.foo').fixDupes();

console.log($('#parent').html());