I am trying to replace specific words (that exists in table glossary)in a post content, the word that exists in the glossary should be replaced with itself wrapped in a glossary_container class, next to it is a plus sign that can be clicked to view the glossary description it has a glossary_description class, my code is working fine, except one thing.

**this is an example to explain my problem
**
tree description is hello I am a tree and a branch and I am green
flower description is hello I am flower
branch description is hello I am branch

the post content is “tree has many things, such as a flower,a branch”
there should be a plus sign next to tree, flower, branch to open their description box, instead, there is a a string added after tree that says “branch” with a plus sign next to it and the required classes
**so it looks like this in html **
tree<span class=”plus-sign” data-index=”0″ data-title=”hello I am a tree and a<span class=” glossary_container”=””> branch+ and I am green” style=”cursor:pointer”>+

**so it looks like this in page **
hello I am a tree branch + and I am green

Explanation of the problem: instead of adding the three description boxes, it scans the post content and sees “branch” in tree description (the first word) and adds the description next to it thinking that it is the word that needs a box, I want it to add it next to the post content so in the last word of the post content.

So it should not see post content with the added description boxes, it should only see the original post content and adds the plus sign, description box there.

//this is the code that I am using in vue js and returning to html

            const content = this.isRtl ? this.post.content_ar : this.post.content_en
            let modifiedContent = content.replaceAll(/<br(s*/)?>/gi, '<br /><br />');

            // Loop through each glossary term
            this.glossaries.forEach((glossary, index) => {
            const title = this.isRtl ? glossary.title_ar : glossary.title_en
            const desc = this.isRtl ? glossary.desc_ar : glossary.desc_en
            let filteredDesc = desc.replaceAll(/["']/g, '');
                // Check if the glossary term exists in the content
                if (content.includes(title)) {
                    console.log('content');
                    // Replace the glossary term with a span containing the term and plus sign
                    modifiedContent = modifiedContent.replace(
                        title,
                        `<span class="glossary_container"><span>${title}</span><span class="plus-sign" data-index="${index}" data-title="${filteredDesc}" style="cursor:pointer">+</span></span>`
                    );
                }
            });
            return modifiedContent;