使用模态和 javascript / JQuery 动态更新一行

Question

我想动态编辑和更新我之前提交的一行（类别名称）。我可以通过单击编辑按钮来编辑一行并显示带有值的模态。但是，问题是如何再次提交并替换表中选定行的值（具有相同名称的输入类型）？

例如我添加了3个类别（类别A，类别B，类别C）。我想把B类改成D类再提交

使用下面的代码片段，如果您尝试编辑类别并再次提交，它将再次添加新行而不是替换值。

$(document).ready(function() {
       
        var counter = 0;

        $("#modalfrmdata").submit(function(e){  
            e.preventDefault();
            var categoryname = $("input[name='txtcategoryname']").val();  

            $('#categoryList tbody').append('<tr><td>' + categoryname + '<input type="hidden" name="categoryname[' + String(counter) + ']" value="' + categoryname + '"/></td><td class="content tengah"><button type="button" class="btn btn-success btn-sm btn-edit" data-toggle="modal" data-target="#modalitems">Edit</button> <button type="button" class="btn btn-danger btn-sm btn-delete">Delete</button></tr>');

            $("input[name='txtcategoryname']").val('');  

            counter++;
        });

        $("#categoryList").on("click", ".btn-delete", function(){  
            $(this).parents("tr").remove();  
        });

        $("#categoryList").on("click", ".btn-edit", function(){  
            var inputname = $(this).closest("tr").find("input").attr("name"); 
            var inputvalue = $(this).closest("tr").find("input").attr("value"); 
            
            $("#txtcategoryname").val(inputvalue);
        });  
        
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" style="float:right" class="btn btn-primary" data-toggle="modal" data-target="#modalitems" >Add Category</button>

    <div class="table-responsive">
        <table class="table" id="categoryList">
            <thead>
                <tr>
                    <th>Category Name</th>
                    <th>Action</th>                 
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>            
    </div>

<div class="modal fade" id="modalitems" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">    
        <div class="modal-content">
            <form id="modalfrmdata">
                <div class="table-responsive">
                    <div>
                        <table>
                            <tr>
                                <td class="col-xs-3">Category Name</td>
                                <td>:</td>
                                <td>
                                    <input type="text" id="txtcategoryname" name="txtcategoryname" class="form-control" maxlength="100" />
                                </td>
                            </tr>                                  
                        </table>                       
                    </div>          
                </div>
                <div class="modal-footer">
                    <div class="text-center">
                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </div>                
            </form>
        </div>
    </div>
</div>