Draw a box around some table elements based on the condition in HTML/CSS

I have an index.html file which looks as follows:

span {
        outline: 2px solid black;   
    }

.wrapped {
    outline: 2px solid red;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}

<body>

<div class="container">
    <table align="center">
        <tr>
            <th bgcolor="#f0a00c">Col1</th>
            <th bgcolor="#f0a00c">Col2</th>
            <th bgcolor="#f0a00c">Col3</th>
            <th bgcolor="#f0a00c">Col4</th>
            <th bgcolor="#f0a00c">Col5</th>
        </tr>
        <script>var dictionary = {}</script>
        {% for b in obj %}
        <tr>
            <td>{{ b.col1 }}</td>
            <td><span class="wrapped"><span>{{ b.col2 }}</span></span></td>
            <td>{{ b.col3 }}</td>
            <script> if (!dictionary["{{ b.col2 }}"]) {
        dictionary["{{ b.col2 }}"] = [];
    }
    dictionary["{{ b.col2 }}"].push("{{ b.col3 }}");</script>
            <td>{{ b.col4 }}</td>
            <td>{{ b.col5 }}</td>
        </tr>
        {% endfor %}
        <script>
         delete dictionary[""];
console.log(dictionary)
for (var key in dictionary)
{

    if (dictionary[key].length > 1) {
        var name1 = []
        var id = []
        for (i in dictionary[key]) {    

            var reg1 = dictionary[key][i].split("(")[0];
            name1.push(reg1);
            var reg2 = dictionary[key][i].split("_")[1].match(/[A-Z0-9]*/i);  
            id.push(reg2[0]);
            }
    console.log(name1);
    console.log(id);
    }
}
</script>
        </table>
</div> <!-- /container -->
</body>

I'm reading a table from a mysql database which looks like this:

Col2   | Col3                   | Col4
1      | Name1(something_1234)  | Some_date
1      | Name1(something_3456)  | Some_date
2      | Name3(something_7890)  | Some_date
2      | Name4(something_0988)  | Some_date

The output of dictionary in the above snippet is as follows:

{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}

And name1 and id returns the name part and the id part respectively from col3 for each key, (i.e., ['Name1', 'Name1'] & ['1234', '3456'] for key 1).

Now, I want to know how I could add css on top of the displayed table (kinda like a conditional css, like for all same col2 values add a box around it, then check values of it name parts, if they are same then add a box around them otherwise add separate boxes around then and similarly for the id parts as well), such that I get the following output:

UPDATE: Updated my code above. I'm able to draw box around each Col2 element. But I want to check if col2 cell's value is equal to the previous value then draw box around box together. And how to draw a box only around part of text in the cell i.e., around name and id part in Col3??