Solution 1 :

Something like this

$(document).on("click", '.delButton', function() {
  $(this).closest("tr").remove()
})
$(document).on("onkeypress", '.amt', function(event) {
  return isNumberKey(event)
})
$(document).on("click", '.splitBtn', function() {
  var formcbResult = "some text"
  var $row = $('<tr><td><button class="delButton">Delete</button></td><td>' + formcbResult + '</td><td></td><td></td><td><input type="text" name="SplitID"></td><td></td><td><input class="amt" name="changableAmount"></td><td></td><td class="edited">a</td></tr>')
  $(this).closest('tr').after($row)
});
.delButton {
  width: 40px;
  font-size: 10px;
  padding: 1px;
}

[name=SplitID] {
  padding: 2px;
  width: 100%
}

.amt {
  width: 110px;
  text-align: right;
}

.edited::after {
  content: "✓";
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Accounts</h1>
<div class="fixed">
  <table id="banktable">
    <tbody>
      <tr>
        <th></th>
        <th>Account</th>
        <th>Date</th>
        <th>Entry</th>
        <th>Description</th>
        <th>Ref</th>
        <th>Amount</th>
        <th>Balance</th>
        <th name="modVersion">Edit</th>
      </tr>
      <tr>
        <td><button type="button" class="splitBtn">Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">1</td>
        <td name="description" id="description"><input style="width: 100%;" value="Row 1 description"></td>
        <td>Ref 1</td>
        <td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;" value="0"></td>
        <td style="text-align: right;">balance 1</td>
        <td id="editTable"></td>
      </tr>
      <tr>
        <td><button type="button" class="splitBtn" >Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">2</td>
        <td name="bankdescription" id="bankdescription"><input style="width: 100%;" value="Row 2 description"></td>
        <td>Ref 2</td>
        <td><input classs="amt" name="changableAmount" value="value2"></td>
        <td>balance 2</td>
        <td></td>
      </tr>
    </tbody>
  </table>

Problem :

I have an HTML table with buttons to add rows below the row where the button is selected. This table is populated from a SQL database. The idea (still working on the entire project) is to only update values where the button was clicked.

An example of the table structure:

enter image description here

When button on first row is selected:

enter image description here

The idea is to add a tick mark in the edit column where the button was clicked as well as the newly created row.

Here is my code to add the new row:

function addRows() {
  var formcbResult = "12345"
  $(document).on("click", '.splitBtn', function() {
    $(this).closest('tr').insertBefore($('<tr><td><button class="delButton" style="width: 40px; font-size: 10px; padding: 1px" onclick="deleteRow()">Delete</button></td><td>' + formcbResult + '</td><td>Date</td><td></td><td><input type="text" name="SplitID" style="padding: 2px; width: 100%"></td><td></td><td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;"></td><td></td><td id="edited">a</td></tr>').insertBefore($(this).closest('tr')));
    $(this).closest('tr').remove(1);
  });
}

function deleteRow() {
  $(document).on('click', '.delButton', function() {
    $(this).closest('tr').remove();
  });
}

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}
body {
  font-family: 'Calibri';
}

table th,
table td {
  border: solid 1px;
  border-collapse: collapse;
  border-color: #B7A775;
  padding: 2px 7px;
  font-family: 'Calibri';
  width: auto;
}

th {
  background-color: #4B4E53;
  color: #FFFFFF;
  text-align: left;
}

#bankdescription {
  width: 300px;
}

#banktable {
  border: solid 1px;
  border-collapse: collapse;
}

h1 {
  color: #1E1E1E;
}

#edited {
  font-family: 'Webdings';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Accounts</h1>
<div class="fixed">
  <table id="banktable">
    <tbody>
      <tr>
        <th></th>
        <th>Account</th>
        <th>Date</th>
        <th>Entry</th>
        <th>Description</th>
        <th>Ref</th>
        <th>Amount</th>
        <th>Balance</th>
        <th name="modVersion">Edit</th>
      </tr>
      <tr>
        <td><button type="button" id="SplitButton" class="splitBtn" onclick="addRows(this)">Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">1</td>
        <td name="description" id="description"><input style="width: 100%;" value="Row 1 description"></td>
        <td>Ref 1</td>
        <td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;" value="0"></td>
        <td style="text-align: right;">balance 1</td>
        <td id="editTable"></td>
      </tr>
      <tr>
        <td><button type="button" id="SplitButton" class="splitBtn" onclick="addRows(this)">Split</button></td>
        <td name="cbSelectedName">12345</td>
        <td>Date</td>
        <td style="text-align: right;">2</td>
        <td name="bankdescription" id="bankdescription"><input style="width: 100%;" value="Row 2 description"></td>
        <td>Ref 2</td>
        <td><input onkeypress="return isNumberKey(event)" name="changableAmount" style="width: 110px; text-align: right;" value="value2"></td>
        <td>balance 2</td>
        <td></td>
      </tr>
    </tbody>
  </table>

I am open to suggestions if there is another way to achieve this.

Comments

Comment posted by mplungjan

You now set the event handler in the function EVERY time it is called. That is not what you want. Move the click handler out of the function

Comment posted by evolutionxbox

Consider using event delegation.

Comment posted by mplungjan

Also it seems you insertBefore AND insertAfter

Comment posted by mplungjan

@evolutionxbox He is, just not correctly

Comment posted by mplungjan

You cannot have duplicate IDs

Comment posted by ben

Thanks for your code snippet. I have added my code in the snippet provided. You will see that there are no initial tick marks in the edit column until you click the split button. When clicking this button, I need the tick mark to show in the same line as well.

Comment posted by mplungjan

You still need to move the event handlers out.

Comment posted by mplungjan

I am using your HTML now – you need to explain the split button

Comment posted by ben

The best way to describe the aim of the split button is with a split bill at a restaurant. If you agree that the bill will be split in half, for example, you get one bill, but payment comes from two separate people. The descriptions will thus be different. Let’s say you click the split button on row 1, I need the tick mark on row 1 and the newly created row that will sit on row 2. When I update the database, the code will only check what was edited and only update/insert those records. Hope this gives more clarity.

Comment posted by mplungjan

I think I have given you enough code so you can fix your issue

By