title: Meteorjs edit button and removing from one list adding to other
body: <p>This is my first project with meteor and I am a heavy newbie. Need help with this. Three questions. I want when I press the edit button to focus on text of a task and I can change it... something like this:</p>
  
  <pre><code>&lt;button class="editItem"&gt;Edit&lt;/button&gt; 
  </code></pre>
  
  <p>and after that I can edit text of that <code>li</code>, this is the functionality:</p>
  
  <pre><code>editTask: function(id, todoItem){ 
     Tasks.update({_id: id}, {$set: { title:todoItem }}); 
  }
  </code></pre>
  
  <p>And I'm able to do it if I have input type field, but how to do that with a button (I want to turn ordinary text into input field).</p>
  
  <p>Second question: I have two columns, <code>To Do</code> and <code>Done</code>:</p>
  
  <pre><code>&lt;template name="task"&gt; 
    &lt;li&gt;
      &lt;span class="text"&gt;{{title}}&lt;/span&gt;&lt;/li&gt;
      &lt;button class="completed"&gt;Completed&lt;/button&gt;
      &lt;li&gt;&lt;input type="text" name="task" class="edit"&gt;&lt;/li&gt;
      &lt;button class="saveItem"&gt;Save&lt;/button&gt;
      &lt;button class="cancelItem"&gt;Cancel&lt;/button&gt;
      &lt;button class="editItem"&gt;Edit&lt;/button&gt;
      &lt;button class="delete"&gt;Delete&lt;/button&gt;
      &lt;input type="checkbox" checked="{{checked}}" class="completed"&gt;
    &lt;/li&gt;
  &lt;/template&gt; 
  &lt;template name="taskDone"&gt;
   &lt;li&gt;
    &lt;div&gt;
      &lt;span class="text"&gt;{{title}}&lt;/span&gt;
    &lt;/div&gt;
   &lt;/li&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>How can I hide completed tasks from <code>To Do</code> list and show up in <code>Done</code> list?  Maybe display true or false when I press the button <code>Completed</code> but I cannot pin point the exact way. </p>
  
  <p>I tried playing with checked state but that isn't what I need.</p>