javascriptでtrタグ内に他のタグを追加したい

前提・実現したいこと

選択できるもので選択を押すと、選択済みの方にデータが表示されるようにしたいのですが、
現状ですと、解除ボタンが表示されません。
解除ボタンも表示されるようにしたいのですが、
どのように修正すれば解除ボタンも表示されますでしょうか？
よろしくお願いいたします。

該当のソースコード

html
1                     <div class="container table-responsive mb-3" style="max-height: 60vh; overflow-auto: scroll;">
2                         <table class="table table-hover table-bordered">
3                               <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
4                                  <tr>
5                                      <th scope="col" class="text-center">選択</th>
6                                      <th scope="col" class="text-center">商品名</th>
7                                      <th scope="col" class="text-center">商品CD</th>
8                                   </tr>
9                                </thead>
10                                <tbody>
11                                    <tr>
12                                        <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="btnClick(this)">選択</button></td>
13                                        <td>みかん</td>
14                                        <td>A1</td>
15                                    </tr>
16                                    <tr>
17                                        <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="btnClick(this)">選択</button></td>
18                                        <td>めろん</td>
19                                        <td>B1</td>
20                                    </tr>
21                                </tbody>
22                           </table>
23                       </div>
24
25<form method="POST" action="{{}}">
26                    @csrf
27                    <h5>選択済み商品</h5>
28                    <div class="container table-responsive" style="max-height: 60vh; overflow-auto: scroll;">
29                        <table class="table table-hover table-bordered" id="targetTable">
30                            <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
31                                <tr>
32                                    <th scope="col" class="text-center">解除</th>
33                                    <th scope="col" class="text-center">商品名</th>
34                                    <th scope="col" class="text-center">商品CD</th>
35                                </tr>
36                            </thead>
37                            <tbody>
38                                <tr>
39                              **ここにいれたい**
40                                </tr>
41                            </tbody>
42                        </table>
43                    </div>
44                </form>
45

javascript
1<script type="application/javascript">
2        function btnClick(obj) {
3            var Row = obj.closest('tr');
4            var Cells = Row.getElementsByTagName("td");
5            const name = Cells[1].innerText;
6            const cd = Cells[2].innerText;
7            this.newRow(name, cd)
8        }
9
10        function newRow(name, cd) {
11            let table = document.getElementById('targetTable');
12            let newRow = table.insertRow();
13
14            let btn = newRow.insertCell(0);
15            btn.innerHtml = '<button class="btn btn-secondary ml-2" type="button">解除</button>';
16
17            let newCell = newRow.insertCell(1);
18            let newText = document.createTextNode(name);
19            newCell.appendChild(newText);
20
21            newCell = newRow.insertCell(2);
22            newText = document.createTextNode(cd);
23            newCell.appendChild(newText);
24        }
25    </script>