display all the values when i submit in form with edit and delete buttons

Question

• I am trying to display all the values when i submit in form with edit and delete buttons
• but right now they are displaying only one values...
• when i display new value the old value is replaced by new value...
• can you tell me how to fix it...
• providing my code in codpen below

http://codepen.io/schikara/pen/bpRMMq?editors=1010

$('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    var name = $('#name').val();
    var message = $('#message').val();
    var div = "<div><span>"+name+"</span><span >"+email+"</span><span>"+message+"</span><input type='button' value='Edit' name='editHistory'><input type='button' value='Delete' name='deleteHistory'></div>";  //add your data in span, p, input.. 
    //alert(div);

    $('.gettingValues').html(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form 
    localStorage.clear();
 });

Answer 1

Change

$('.gettingValues').html(div);

To

$('.gettingValues').append(div);

The html method sets the element's inner HTML, overwriting any html that may have already been there. Append will just add the new div without overwriting the previous ones.