Q:

How to get jquery append to only append at the bottom of the element and not multiple times

When using append the element that I add is added several times to my page.  From what I understand append adds to all appended elements which is why it is appending several times.  I tried using clone, but had no success.  What is the workaround.
Here is my code
Script
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                 $('#Test').click(function(){ //this is the method that call append
                      $('#Get_Id').submit(function(event){
                          event.preventDefault();

                          var $form = $( this );
                          url = $form.attr( "action" );
                          $.get( url, function(data){
                               console.log(data);
                               user_data = data;
                               var html = `<div class="note">
                                       <p>${data[0].note}</p>
                                       <form action="/delete/${data[0].id}" method="post" id="delete_note">
                                            <input type="submit" name="submit" value="Delete" class='delete'/>
                                       </form> 
                                       <form action="/AddDescription/${data[0].id}" method="post" class="update_note">
                                            <label asp-for="Description" >Description</label>
                                            <textarea name="Description" id="" cols="30" rows="10" class="Description">${data[0].description}</textarea>
                                            <input type="submit" name="submit" class="update" value="Update"/>
                                        </form> 
                                 </div>` 

                               $('.added_notes').append(html);
                          });
                      }); 
                 });
               });

            });
        </script>

Html
 @model ajaxNotes.Models.Home

<div class = "notes">
    @{
        if(ViewBag.Notes != null)
        {
            foreach(var note in ViewBag.Notes )
            {
                <div class = "note">
                <p>@note.Note</p>
                 <form action="/delete/@note.Id" method="post" id="delete_note">
                    <input type="submit" name="submit" value="Delete" class='delete'/>
                </form> 

                <form action="/AddDescription/@note.Id" method="post" class="update_note">
                    <label asp-for="Description" ></label>
                    <textarea name="Description" id="" cols="30" rows="10" class="Description">@note.Description</textarea>
                    <input type="submit" name="submit" class="update" value="Update"/>
                </form> 
                </div>

            }
        }
    }
</div>
 <div class="added_notes">

</div>
<form asp-controller="Home" asp-action="AddNote" method="post" id="New_Note">
    <label asp-for="Note" ></label>
    <p><input asp-for="Note" class = "Note" name="Note"/> </p>   
    @{
        if(ViewData["error"] != null)
        {
            <p>Please enter data for Notes</p>
        }
    }
    <button type="submit">Add Note</button>
</form>

<form asp-controller="Home" asp-action="GetLastEntry" method="post" id="Get_Id">
    <label asp-for="Note" ></label>
    <p><input asp-for="Note" class = "Note" name="Note"/> </p>   
    @{
        if(ViewData["error"] != null)
        {
            <p>Please enter data for Notes</p>
        }
    }
    <button type="submit" id = "Test">Add Note</button>
</form>

A:

Your use of "click" and "submit" is redundant here. The button acts as a submit trigger so choose one. The problem is created when you do
$("button").on("click", function(e) {
    // this creates a new binding on click
    $("form").on("submit", function(e) {
    });
});

You are creating duplicate binding for "submit" and this multiplies on each click. Hence the duplicate appending.

