JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr id="splice-bar">
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tag 1</td>
            <td>tag 2</td>
            <td>tag 3</td>
            <td>tag 4</td>
            <td>tag 5</td>
            <td>tag 6</td>
        </tr>
        <tr>
            <td>tag 1</td>
            <td>tag 2</td>
            <td>tag 3</td>
            <td>tag 4</td>
            <td>tag 5</td>
            <td>tag 6</td>
        </tr>
    </tbody>
</table>
<select>
    <option>tag 1</option>
    <option>tag 2</option>
    <option>tag 3</option>
    <option>tag 4</option>
    <option>tag 5</option>
    <option>tag 6</option>
</select>

CSS

thead tr th { background: #FFF; text-align:center;}
thead tr th.spliced { background: green; color: #FFF; }
td{ border: 1px solid #000000;}

JavaScript

$('select').change( function() {
    var selectedVal = $(this).val();
    var column = $('td').filter(function() {
        return $(this).text() == selectedVal;
    }).index();
    var cellBefore = column - 1;
    var cellAfter = column + 1;
    var spliceFirst = 'Val';
    var spliceLast = 'Val';
    $("tbody tr").each( function() {
    $(this).find("td:eq(" + cellBefore + ")").after("<td>" + spliceFirst + "</td>");
    $(this).find("td:eq(" + cellAfter + ")").after("<td>" + spliceLast + "</td>");
 
    });
    var spliceHeader = '';
    for (var i = 0; i < column; i++) {
        spliceHeader += "<th></th>";
    }
    spliceHeader += "<th class='spliced' colspan='3'>Tag</th>";
    $("thead #splice-bar").html(spliceHeader);
    
});