My todo list is bugged : Can some one help me? i'm trying to code a **simple todolist with JS** i'm 
begginer on this language, my tasks were adding ok, but when i created a button to complete the task it bugged everything.

Here's my code

    <!DOCTYPE html>
        <html>
        <head>
        <title>TODO</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
        <h1>TODOLIST</h1>

        <input id="task"><button id="add">Add</button>
        <hr>

        <h2>todo</h2>
        <ul id="todos"></ul>
        <h2>done</h2>
        <ul id="done"></ul>

        <script src="todo.js"></script>
        </body>
        </html>

JS:

    function get_todos() {
    var todos = new Array;
    var todos_str = localStorage.getItem('todo');
    if (todos_str !== null) {
        todos = JSON.parse(todos_str); 
    }
    return todos;
    }

    function get_dones(){
    var dones = new Array;
    var dones_str = localStorage.getItem('done');
    if (dones_str !== null){
        dones = JSON.parse(dones_str);
    }
    return dones;
    }

 
    function add() {
    var task = document.getElementById('task').value;
 
    var todos = get_todos();
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));
 
    show();
 
    return false;
    }
 
    function remove() {
    var id = this.getAttribute('id');
    var todos = get_todos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
 
    show();
 
    return false;
    }
 
    function show() {
    var todos = get_todos();
    var dones = get_dones();
    
 
    var html;
    for(var i=0; i<todos.length; i++) {
        html += '<li>' + todos[i] + '<button class="remove" id="' + i  + '">Delete</button> <button class="done" id="' + i  + '">Done</button></li>';
    };
 
    document.getElementById('todos').innerHTML = html;
    
    var html;
    for(var i=0; i<dones.length; i++) {
        html += '<li>' + dones[i] + '<button class="remove" id="' + i  + '">Delete</button> <button class="done" id="' + i  + '">Done</button></li>';
    };
    
    document.getElementById('dones').innerHTML = html;
    
    var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
    
        var buttons = document.getElementsByClassName('done');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', done);
    };

    function done(){
    var id = this.getAttribute('id');
    var done = get_dones();
    localStorage.setItem('done', JSON.stringify(dones));
 
    show();

    return false;
    }
 
    document.getElementById('add').addEventListener('click', add);
    show();