javascript - Questions about the association between tables and forms

Question

As shown in the picture:
Purpose:
1. Click the add button above and add a column of trtd to the table on the left. The content of the added trtd is in an object and I store it directly. (Implemented)
2. When selecting the trtd of a table on the left, you can add trtd on the right (the add button on the right has not been written yet) (I don’t know if it is trtd, because it seems that select cannot nested within the table). (Not implemented, I have no idea, I don’t know how to select the table, and I don’t know how to associate it with the right side)
3. After selecting various options on the right side, the selected information can be passed back to the left side. (I haven’t implemented this either, and I have no idea either)

Requirements: Don’t use all kinds of messy frameworks. Basically, it can only be implemented with js and jq.

code show as below:

<button>添加</button>
<table border="1px solid #000">
<thead>
    <tr>
        <th style="width:100px;"></th>
        <th style="width:200px;">纳税人识别号</th>
        <th style="width:200px;">纳税人名称</th>
    </tr>
</thead>
<tbody id="a">
    <!-- 点击上方添加按钮，在这里创建trtd -->
</tbody>
</table>
<!-- 右侧部分 -->
<form action="" style="width:600px;float:right;margin-right:590px;margin-top:100px;">
    <table id="b" border="1px solid #000">
        <thead>
            <tr>
                <th style="width:100px;">计算期类型</th>
                <th style="width:200px;">期间</th>
                <th style="width:200px;">征收方式</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <!-- 右侧下边的添加的下拉菜单 -->
    <p id="area">
        <select id="zType_time"></select>
        <select id="zType_years"></select>
        <select id="month_quarter"></select>
    </p>
</form>
<script>
    //这个是上边添加按钮，点击后为左侧添加一个表格的trtd。
    $('button').on('click',function(){
        //左侧添加的表格的内容在这个对象hahaha里。
        var hahaha = {
            num:"1",
            codes:"123456789",
            company:"啦啦啦啦啦"
        }
        var aaa = $('<tr><td>'+hahaha.num+'</td><td>'+hahaha.codes+'</td><td>'+hahaha.company+'</td></tr>');
        var bbb = $('#a');
        bbb.append(aaa); 
    })
</script>

Answer 1

Small points:
1. Select can be nested in td
2. "Table selection": I interpret it as the element gaining and losing focus, you can use jquery's focus(), blur()

Specific content:
1. "Add button on the right": What effect do you want to have after clicking it, such as a blank row in the table on the right, or a row with select?
2. "Select the table and associate it with the right side": What do you need to associate it with? What effect is achieved?
3. "After selecting various options on the right side, the selected information can be passed back to the left side": Where does the option value you select need to be passed back to the left side of the table?
(As shown in the picture, the arrangement of the table on the left only contains the taxpayer’s identification number and name)