Few style changes; Task gets appended now but mispositioned cursor +

duplication issues

public/index.html

@@ -25,7 +25,7 @@
               <h2></h2>
             </div>
             <ul class="children"></ul>
-            <button id="add">+</button>
+            <!-- <button id="add">+</button> -->
           </section>
           <footer id="footer">
             Make Lists. Catch Fish. <3 Open Source.
@@ -36,7 +36,7 @@
     <script type="text/template" id="taskTemplate">
       <div class="task">
         <div class="link">•</div>
-        <textarea data-id="<%= id %>" class="edit"><%= content %></textarea>
+        <textarea rows="1" data-id="<%= id %>" wrap="off" class="edit"><%= content %></textarea>
       </div>
     </script>
     <script src="javascripts/vendor/jquery.min.js"></script>

public/javascripts/views/list.js

@@ -26,7 +26,10 @@ var app = app || {};
       var taskView = new app.TaskView({
         model: task
       });
-      this.$el.append(taskView.render().el);
+      var a = taskView.render();
+      this.$el.append(a.el);
+      a.$input.focus();
+      console.log(a.$input.prop('selectionStart'));
     }
 
   });

public/javascripts/views/task.js

@@ -48,11 +48,9 @@ var app = app || {};
 
     add: function(e) {
       if ( e.which === ENTER_KEY ) {
+        app.Tasks.add({content:''});
         this.$input.blur();
-        var task = new app.Task({content:''});
-        var taskView = new app.TaskView({model:task}).render();
-        taskView.$el.insertAfter(this.$el);
-        taskView.$input.focus();
+        //this.next('textarea').focus();
       }
     },
 

public/sass/app.scss

@@ -127,6 +127,9 @@ body {
               overflow: hidden;
               position: relative;
               word-wrap: break-word;
+              white-space: pre-wrap;
+              text-align: start;
+              -webkit-writing-mode: horizontal-tb;
             }
             textarea.edit:focus {
               background-color: white;