Input values disappears on adding dynamic rows

I am making a form where the user can add a row depending on the user's requirement. I was able to build it but every time I click on my add row button, all the input values disappear. This question is a duplicate, link. But no answer can resolve my issue.

I have my JSFiddle here, or check the snippet below.

As you can see in my JS, I have these lines of code for adding a new row as below.

            let inner = tbodyRef.innerHTML;
            inner += newHtml;
            tbodyRef.innerHTML = inner

And my other option is as below;

            tbodyRef.append(newHtml);

But this append is adding pure text only.

What is the best approach I can make it here?

                        var i = 1;
            $('body').on('click','.insert-row',function(){
                addRow()
            });

            function addRow() {
                var tbodyRef = document.getElementById('instructionHeader1')
                i++;
                var newHtml = '<tr id="row_num' + i + '"><td style="width: 400px; padding-top: 1px; padding-bottom: 1px;">' +
                    '<div class="d-flex align-items-center">' +
                    '<div class="input-group">' +
                    '<input name="instructions[1][steps][]" class="form-control" type="text" placeholder="" />' +
                    '<span class="input-group-text text-body" id="row_num' + i + '">' +
                    '<button type="button" class="btn btn-icon-only btn-rounded btn-outline-danger mb-0 ms-2 btn-sm d-flex align-items-center justify-content-center ms-auto delete-row">'+
                    '-' +
                    '</button>' +
                    '</span>' +
                    '</div>' +
                    '</div>';
                    '</div>';
                    '</td>' +
                    '</tr>';

                let inner = tbodyRef.innerHTML;
                inner += newHtml;
                tbodyRef.innerHTML = inner
                
               /*  tbodyRef.append(newHtml); */

                $('input').on('keyup', function(event) {
                    $(this).val(function(i, v) {
                        return v.replace(/[a-zA-z]/, function(c) {
                            return c.toUpperCase();
                        })
                    })
                });
            }

            $(document).on('click','.delete-row',function(){
                $(this).closest('tr').remove();
                $('tbody tr').each(function(index) {
                    $index = index + 1;
                    var btnNew = '<button type="button" class="btn btn-icon-only btn-rounded btn-outline-danger mb-0 ms-2 btn-sm d-flex align-items-center justify-content-center ms-auto delete-row">'+
                                '<i class="fas fa-times" aria-hidden="true"></i>' +
                                '</button>&nbsp;#';
                    $(this).find("tr:eq(0)").attr("id", "row_num" + $index)
                    
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="" style='table-layout:fixed; fixed-width:100%; border-collapse: separate; border-spacing: 0 0.01em;'>
<tbody id="instructionHeader1" class="instructionHeader">
<label class="form-control-label">Header</label>
<div>
<input name="instructions[1][name]" style="tex开发者_开发知识库t-transform: capitalize;" type="text" placeholder='Example "For the gravy"' class="form-control " autocomplete="off">
</div>
<tr id="row_num1">
<td style="width: 400px; padding-top: 1px; padding-bottom: 1px;">
<div class="d-flex align-items-center">
<div class="input-group">
<input name="instructions[1][steps][]" class="form-control" type="text" placeholder="One step at a time (e.g. Finely chop the garlic)" />

</div>
</div>
</td>
</tr>
</tbody>
</table>
<div>
<button type="button" class="btn btn-icon-only btn-rounded btn-outline-success mb-0 ms-2 btn-sm d-flex align-items-center justify-content-center insert-row">
+
</button>
</div>