JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1" class="n-concept"><h3>Test 1</h3></div>
<div id="test2" class="n-concept"><h3>Test 2</h3></div>
<div id="test3" class="n-concept"><h3>Test 3</h3></div>

<div class="original-text">Text containing the Test 1 code.</div>
<div class="original-text">Text containing the test2 code.</div>
<div class="original-text">Text containing the Test 2 code.</div>
<div class="original-text">Text containing the Test 3 code.</div>

CSS

.noun-name
{
    color:red
}

JavaScript

$('.n-concept').each(function() {
    
    var nounName = $(this).find('h3').html();
    var nounID = $(this).attr('id');
    var newString = '<span data-vocabID="'+nounID+'" class="noun-name">'+nounName+'</span>';
	
    $('.original-text').each(function() {
        var newText = $(this).html().replace(RegExp(nounName, 'gi'), newString);
        $(this).html(newText);
    });
});