I'm been studying Java at school but decided to try JavaScript and have been applying for a JavaScript bootcamp. I've spent a lot of time studying JavaScript to complete the application but never before have I experienced something so mind-bendingly, make-me-want-to-give-up-on-being-a-programmer frustrating as learning Backbone.js. 

I have struggled for hours and hours to make a simple program but right now when I fill in information and click submit it creates multiple copies of the el on the page with the entered info, then disappears. I have no idea why either is happening except that the "view instantiated" console log I put in displays both then starting the program and when I click submit.
The relevant html:

> 
> 
> ```
> <container class="app">
> <form id="userInfo">
>     <table>
>         <tr><td>First name:</td> <td><input type="text" id="firstName" required></td></tr>
>         <tr><td>Last name:</td>  <td><input type="text" id="lastName" ></td></tr>
>         <tr><td>E-mail:</td>     <td><input type="email" id="email"></td></tr>
>         <tr><td><button class="addUser" type="submit">add user</button></td></tr>
>     </table>
> </form>
> <span class="users"></span>
> </container>
> 
> ```
> 
> 

The model:

```
var User = Backbone.Model.extend({
    defaults: function(){
        return {
            firstName: 'test',
            lastName: '',
            email: ''
        }
    }
});

```

The view: 

```
var UserView = Backbone.View.extend({
 template: _.template( "<div class='item'>First name: <%= firstName %><br>Last name: <%= lastName %> <br>E-mail: <%= email %><br><button class='delete' type='submit'>delete user</button><button class='edit' type='submit'>edit</button></div>"),
    el: '.app',
    initialize: function(){
        console.log("view instantiated");
        _.bindAll(this, 'render', 'createUser');
        this.model.on('change', this.render);
    },
    events: {
        'submit form': 'createUser',
        'click .delete': 'deleteUser',
        'click .edit': 'editUser'
    },

    render: function(){
        $('.users').append(this.template(this.model.toJSON()));
        console.log("changed to " + this.template(this.model.toJSON()));
        return this;
    },

    createUser : function(){
        alert("adding user");
        this.model.set({'firstName': $("#firstName").val()});
        this.model.set({'lastName': $("#lastName").val()});
        this.model.set({'email': $("#email").val()});
        this.render();
    },

    deleteUser: function(e){
        alert('delete user');
    },
    editUser: function(e){
        alert('edit user');
    },

});

var user = new User;
var userView = new UserView({model: user});

```

There is still a lot of functionality I have to put in this before it's done. Any help would be greatly appreciated. Describing this project as Sisyphian is an understatement.

Edit: Okay, to clarify, I want to create a system where someone can enter a first/last name and email to create a user, have a box with that information show up on screen. So far that part is finished, except several boxes are created when you click submit and then they all minimize. Eventually the you will be able to create multiple users and edit or delete them. This user information doesn't connect with anything, just lives in the browser.