How can I add new button to new row in javascript(MVC 5)?

Question

I am Beginner. Thank you! i have 2 button Delete and Edit, it show when refresh after i add 1 new row. I need show them without F5, can you fix my AJAX, after i add 1 new row, no button show, i need F5 to refresh page to load it from database. Can you rewrite my 'var tr' .Thank you! My ID = @ViewBag.NewID My HOME CONTROLER: u.ID = Guid.NewGuid().ToString(); ViewBag.NewID = u.ID;

  <table id="UserList">
        <tr>
            <th>Username</th>
            <th>Password</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
        @foreach (Database_Users item in Model)
        {
            <tr id="[email protected]">
                <td class="uid">@item.Uid</td>
                <td class="pwd">@item.Pwd</td>
                <td class="name">@item.Fullname</td>
                <td>
                // THERE ARE 2 BUTTON I NEED CREAT WITHOUT REFRESH
                    <a href="javascript:Delete('@item.ID','@item.Fullname')">
                        [Delete]
                    </a>
                    &nbsp;
                    <a href="javascript:BeginEdit('@item.ID','@item.Uid','@item.Fullname')">
                        [EDIT]
                    </a>
                </td>
            </tr>
        }
    </table>
    <script>    
        function AddNewUser() {               
                       
                        // My ID = @ViewBag.NewID                           
                        //ADD 1 ROW --- NEED 2 button show = AJAX
                        var tr = '<tr><td>' + uid + '</td><td>' + pwd1 + '</td><td>' + name + '</td><td></td></tr>';                                                
                        
                        $('#UserList').append(tr);                  
                                             
            }              
        }   
    </script>

My View after add 1 new row, i need 2 button show by AJAX

Answer 1

In AddNewUser function you can replace this line, but if you have this newely created ID // My ID = @ViewBag.NewID

    var tr = `<tr><td>  ${uid}} </td><td> ${pwd1} </td><td> ${name}</td><td>  <a href="javascript:Delete("${uid}","${name}")">[Delete]</a>&nbsp;<a href="javascript:BeginEdit("${ID}","${uid}","${name}")">[EDIT]</a> </td></tr>`;