JavaScriptを使用したテーブル行の削除処理についてアドバイスをください。

実現したいこと

Javascriptを使用して行の追加・削除についての処理を作成しています。
行の追加については行（ｔｒ）の最大値からプラス１して追加させることができたんですが、
行の「削除」処理と「削除」した後の「行の追加」が思った通りに動作しません。

前提

下記の通り左から３列（td）の数値が追加・削除したときに増減するように設定したいのですが、うまく動作しません。
また、２列目と３列目に関してはそれぞれ、テーブルの最大値で処理させているのですが、
１列目に関してはDBにあるあるデータの最大値を使っています。

◆１列目：DBにあるあるカラムの最大値＋１（画像から一番上にあるテキストボックスの値）
◆２列目：テーブルの行数＋１
◆３列目：テーブルの行数＋１

発生している問題・エラーメッセージ

上記の画像から、行の左の「削除」ボタンを押下すると、行は削除してくれるのですが、左の数値が切り替わらず困っています。
また、削除した後に「行を追加」すると、削除した後の数値も切り替わりません。

◆行削除したとき
16 16 16 ...削除
17 17 17 ...削除　←削除したとき
18 18 18 ...削除
↓
16 16 16 ...削除
18 18 18 ...削除

◆行削除したあとに追加したとき
16 16 16 ...削除
18 18 18 ...削除
↓
16 16 16 ...削除
18 18 18 ...削除
19 18 18 ...削除 ←追加

削除した後にvalueの値がうまく切り替わっていないのが問題だと思うのですがどのように修正すればいいのか
いまいちよくわかりません。
どなかお力添えいただけないでしょうか？

該当のソースコード

HTML

1 <tbody id="bodyTbl"> 2 <c:forEach var="DCDList" items="${DCDList}" varStatus="s"> 3 <tr> 4 <td class="itemno_text"> 5 <input type="text" size="1" id="" class="itemno" name="itemnoName" value="${DCDList.getT_item_no()}" readonly style="background-color: transparent; border: none;"> 6 </td> 7 <td> 8 <input type="text" size="1" class="orderUnableID" name="itemorderUnable" id="orderIDUnable${s.count}" value="${DCDList.getT_item_order()}" readonly style="background-color: transparent; border: none;" onchange="" > 9 </td> 10 <td> 11 <input type="text" size="1" class="orderval" name="itemorder" id="orderID${s.count}" value="${DCDList.getT_item_order()}" readonly style="background-color: transparent; border: none;" onchange="" > 12 </td> 13 <td> 14 <input type="text" id="" class="" name="input" value="${DCDList.getT_input()}" readonly style="background-color: transparent; border: none;" onchange=""></td> 15 <td> 16 <input type="text" id="" class="" name="inputdata" value="${DCDList.getT_input_date()}" readonly style="background-color: transparent; border: none;" onchange=""></td> 17 <td> 18 <select name="itemPatern" id="itemSelect" class="selectval" disabled style="margin: 0 auto; "> 19 <c:forEach var="IPMList" items="${IPMList}" varStatus="s"> 20 <option value="${IPMList.getM_item_pattern_no()}" 21 <c:if test="${IPMList.getM_item_pattern_no() == DCDList.getT_item_pattern_no()}">selected</c:if>> 22 <c:out value="${IPMList.getM_item_pattern_name()}" /></option> 23 </c:forEach> 24 </select></td> 25 <td> 26 <input type="text" id="" class="inputval" name="output" value="${DCDList.getT_output()}" readonly style="background-color: transparent; border: none;" onchange=""> 27 </td> 28 <td> 29 <input type="text" id="" class="inputval" name="outputdata" value="${DCDList.getT_output_date()}" readonly style="background-color: transparent; border: none;" onchange=""> 30 </td> 31 <td> 32 <input type="text" id="" class="errorval" value="${DCDList.getT_error_content()}" class="errorContent" style="background-color: transparent; border: none;"> 33 </td> 34 <td> 35 <p>削除</p> 36 </td> 37 <td class="editflg_text"> 38 <input type="text" id="" class="errorval" name="editflg" value="${DCDList.getT_editflg()}" readonly style="background-color: transparent; border: none; width: 10px;"> 39 </td> 40 </tr> 41 </c:forEach> 42 </tbody>

Javascript

1 // 行追加ボタン処理2 function addRow() {3 if(typeof document !== 'undefined') {4 var objTbl = document.getElementById("tbl");5 var bodyTbl = document.getElementById("bodyTbl");6 7 // disPlayOrderの最大値8 var disOrderMax = document.getElementById("disOrderMax").value;9 10 // 数値に変換11 var displayCon = Number(disOrderMax);12 console.log("displayCon:" + displayCon);13 14 15 if(!objTbl)16 return;17 var count = objTbl.rows.length;18 var bodyCon = bodyTbl.rows.length + 1;19 var displayCon = displayCon + 1;20 document.getElementById("disOrderMax").value = displayCon;21 22 console.log("count:" + count);23 console.log("bodyCon:" + bodyCon);24 console.log("displayCon:" + displayCon);25 // 最終行に行を追加26 var row = objTbl.insertRow(count);27 // 列の追加28 var cell0 = row.insertCell(0); // Item_No29 var cell1 = row.insertCell(1); // 表示番号(編集不可 変更前)30 var cell2 = row.insertCell(2); // 表示番号(編集不可 変更後)31 var cell3 = row.insertCell(3); // 変換前　項目32 var cell4 = row.insertCell(4); // 変換前　値33 var cell5 = row.insertCell(5); // 項目パターン（セレクトボックス）34 var cell6 = row.insertCell(6); // 変換後　項目35 var cell7 = row.insertCell(7); // 変換後　値36 var cell8 = row.insertCell(8); // エラー/警告37 var cell9 = row.insertCell(9); // 削除ボタン38 var cell10 = row.insertCell(10); // 編集フラグ39 40 // 各列にスタイルを設定41 cell0.style.cssText = '';42 cell1.style.cssText = '';43 cell2.style.cssText = '';44 cell3.style.cssText = '';45 cell4.style.cssText = '';46 cell5.style.cssText = '';47 cell6.style.cssText = '';48 cell7.style.cssText = '';49 cell8.style.cssText = '';50 cell9.style.cssText = '';51 cell10.style.cssText = '';52 // 各列に設定53 54 cell0.innerHTML = '<input type="text" size="1" id="" class="itemno" name="itemnoName" value="'+ displayCon +'" readonly style="background-color: transparent; border: none;">';55 cell1.innerHTML = '<input type="text" size="1" class="orderUnableID" name="itemorderUnable" id="orderUnableID'+ bodyCon +'" value="'+ bodyCon +'" readonly style="background-color: transparent; border: none;">';56 cell2.innerHTML = '<input type="text" size="1" class="orderval" name="itemorder" id="orderID'+ bodyCon +'" value="'+ bodyCon +'" readonly style="background-color: transparent; border: none;">';57 cell3.innerHTML = '<input type="text" id="" class="inputval" name="input" value="" readonly style="background-color: transparent; border: none;">';58 cell4.innerHTML = '<input type="text" id="" class="inputval" name="inputdata" value="" readonly style="background-color: transparent; border: none;">';59 cell5.innerHTML = '<select name="itemPatern" id="itemSelect" class="selectval" disabled style="margin: 0 auto; "><c:forEach var="IPMList" items="${IPMList}" varStatus="s"><option value="${IPMList.getM_item_pattern_no()}"><c:out value="${IPMList.getM_item_pattern_name()}" /></option></c:forEach></select>';60 cell6.innerHTML = '<input type="text" id="" class="inputval" name="output" value="" readonly style="background-color: transparent; border: none;">';61 cell7.innerHTML = '<input type="text" id="" class="inputval" name="outputdata" value="" readonly style="background-color: transparent; border: none;">';62 cell8.innerHTML = '<input type="text" id="" class="errorval" value="" readonly style="background-color: transparent; border: none;">';63 cell9.innerHTML = '<input type="button" class="delbtn" value="削除" onclick="deleteRow(this)">';64 cell10.innerHTML = '<input type="text" id="" class="errorval" name="editflg" value="0" readonly style="background-color: transparent; border: none; width: 10px;">'65 // 行番号を整理する66 colOrganize();67 68 }69 }70 // 行削除ボタン処理71 function deleteRow(obj) {72 // 削除ボタンを押下された行を取得73 tr = obj.parentNode.parentNode;74 // trのインデックスを取得して行を削除する75 tr.parentNode.deleteRow(tr.sectionRowIndex);76 // 行番号を整理する77 colOrganize(obj);78 }79 // 行番号を整理80 function colOrganize() {81 var bodyTbl = document.getElementById("bodyTbl");82 83 var bodyCon = bodyTbl.rows.length;84 for(var i=1; i<bodyCon; i++) {85 var orderID = document.getElementById("orderID"+i);86 var orderUnableID = document.getElementById("orderUnableID"+i);87 88 89 var a = bodyTbl.rows[i].querySelector('.itemno').value;90 var b = bodyTbl.rows[i].querySelector('.orderUnableID').value;91 var c = bodyTbl.rows[i].querySelector('.orderval').value;92 93 console.log("a" + a);94 console.log("b" + b);95 console.log("c" + c);96 a = i 97 b = i 98 c = i 99 a.innerText = a;100 b.innerText = b;101 c.innerText = c;102 }103 }

試したこと

console.log(bodyTbl.rows[i].cells[1].innerText = i);
上記のコードで（innerText)で行うと削除すると繰り上げることはできたのですが
追加したとき、値が重複したり、valueに設定されないなど状態でうまく活用することができませんでした。
◆２列目の一行目が重複する
1 1 1 ...
2 2 2 ...
3 3 3 ...
↓
1 1 1 ...
1 1 1 ...
2 2 2 ...

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
参考にしたサイト
https://www.northwind.mydns.jp/samples/table_sample1.php
https://teratail.com/questions/371458