Как отобразить в одном td N-количество значений в зависимости от того, сколько N тегов select в th

Всем привет, у меня есть таблица, которая содержит определенную информацию

Прикладываю пример:

В этой таблице вы можете увидеть теги select внутри th, я могу выбрать в select, какую инфу отобразить в колонке и вывести её - пример:

Выбираем, какую инфу хотим отобразить в колонке Выводим инфу (В 4ом столбце информация поменялась с ageUser на id):

Здесь мы также видим кнопки (+), при нажатии на которые мы добавляем такой же select

Здесь я нажал 3 раза на кнопку добавление селекта

В чем задача: если у меня в каком-то из столбцов, к примеру, 3 селекта, то и в столбце, в ячейке td у меня должно выводится 3 инфы в зависимости от того, что выбрано в селектах

К примеру, как это должно выглядеть:

Как это можно реализовать со стороны фронта? Очень прошу вашей помощи.

(function() {  
    let table = document.querySelector("table");
    let copyTable = table.cloneNode(true);
    let copyTdAll = copyTable.querySelectorAll("td");
    let selects = document.querySelectorAll('select');
    let addSelectsButtons = document.querySelectorAll(".add-select");
    let removeSelectsButtons = document.querySelectorAll(".remove-select");

    for(let button of addSelectsButtons){
        button.addEventListener('click', addSelectFunc);
    }

    for(let button of removeSelectsButtons){
        button.addEventListener('click', removeSelectFunc);
    }

    for(let select of selects){
        select.addEventListener('change', optionValue);
    }

    function addSelectFunc() {
        let button = this;
        let select = button.nextElementSibling; 
        let copySelect = select.cloneNode(true);  
        copySelect.addEventListener('change', optionValue);
        let th = button.parentNode;
        th.appendChild(copySelect);     
    }

    function removeSelectFunc() {
        let button = this;
        let select = button.nextElementSibling; 
        let th = button.parentNode;
        th.removeChild(select);     
    }

    $('input:checkbox').change(function(){
        let checkBoxClass = $(this).attr("class");    
        if(this.checked){
            $("th[class='" + checkBoxClass + "']").show();
            $("td[class='" + checkBoxClass + "']").show();
        }
        else{
            $("th[class='" + checkBoxClass + "']").hide();
            $("td[class='" + checkBoxClass + "']").hide();
        }
        $('div#Debug').text("hiding " + checkBoxClass);

    });  

    $('.main-item').on('click', function(){
        $('.sub-menu').slideToggle(400);
    });

    $('.main-value').on('click', function(){
        $('.sub-menu').slideToggle(400);
    });

    function optionValue() {
        let sel = this;
        let option = sel.options[sel.selectedIndex].text;
        sel.parentNode.className = option;   
        let column = sel.getAttribute('data-index')
        let optionAll = [];
    
        for(let el of copyTdAll){
            if(el.className === option){
                optionAll.push(el.innerText);
            }
        }
        let index = 0;
        let rows = document.querySelectorAll('tr');
        for(let row of rows){
            let cells = row.querySelectorAll('td');
            for(let cell of cells){
                if(cell.getAttribute('data-index') === column){
                    cell.className = option;
                    cell.innerText = optionAll[index-1];
                }
            }
            index += 1;
        }
    }
})();

XML:

<?xml version='1.0' encoding='utf-8'?>

<template id="tableID">
    <t t-name="tableView">
        <div class="row ml16 mr16">

            <a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a> 
                <ul class="sub-menu"> 
                    <t t-foreach="field_name" t-as="field" class="col-3">
                        <th>
                            <div class="menu">
                                <div class="menu-box">
                                    <input t-att-class="field" type="checkbox" checked="checked"/>
                                    <div style="padding-left: 10px;">
                                        <t t-esc="field"/>
                                    </div>
                                </div>
                            </div>
                        </th>
                    </t> 
                </ul> 

            <table width="100%" border = "1" cellpadding = "5" cellspacing = "5">
                <tr>
                    <t t-set="count" t-value="0"/>
                    <t t-foreach="field_name" t-as="field" class="col-3">
                        <th  t-attf-data-index="{{count}}" t-att-class="field" style="
                        background-color: #7C7BAD;
                        border: 1px solid #5f5e97;" >
                            <input type="button" class="add-select" value="+"/>
                            <select t-attf-data-index="{{count}}" style="
                            width: 85px;
                            width: 85px;
                            height: 30px;
                            border: none;
                            border-radius: 3px;
                            margin-left: auto;
                            margin-right: auto;
                            text-align: center">
                                <t t-foreach="field_name" t-as="option" class="col-3">
                                    <t t-if="field == option">
                                        <option t-att-class="option" t-esc="option" selected="true">
                                            <t t-esc="field"/>
                                        </option>   
                                    </t>
                                    <t t-else="">
                                        <option t-att-class="option" t-esc="option">
                                            <t t-esc="field"/>
                                        </option>
                                    </t>
                                </t>                                    
                            </select>
                            <input type="button" class="remove-select" value="-"/> 
                            <t t-set="count" t-value="count + 1"/>                                       
                        </th>
                    </t>
                </tr>
            <t t-foreach="groups" t-as="group" class="col-3">
                <t t-set="count" t-value="0"/>
                <t t-set="group_data" t-value="groups[group]"/>
                <tr>
                    <t t-foreach="field_name" t-as="field" class="col-3">
                        <t t-set="filk" t-value="group_data[field]" />
                        <td t-att-class="field" t-attf-data-index="{{count}}" style="
                        border: 1px solid #5f5e97;
                        text-align: center;">
                            <t t-esc="filk"/>
                        </td>
                        <t t-set="count" t-value="count + 1"/>
                    </t>
                </tr> 
            </t>
            </table>
        </div>
        <script type="text/javascript" src="/academy/static/js/table_checkboxes.js"></script>
    </t>
</template>