title: Functions in a template literal
body: <p>I am making a ToDo app for a class I'm taking (and there goes another puppy), and I'm having some issue with a function actually getting called properly.</p>
  
  <p>In jQuery I am appending each individual items using a Template Literal.</p>
  
  <pre><code>$("#taskList").append(`
                  &lt;div class="list-group-item"&gt;
  
                    &lt;h4 class="list-group-item-heading ${field.completed ? 'done' : ''}"&gt;
                      ${field.task}
                    &lt;/h4&gt;
                    &lt;div class="buttons"&gt;
                      ${field.completed
                        ? `&lt;div class="delete"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/div&gt;`
                        : `&lt;div class="complete" onclick="completeTask(${field._id})"&gt;
                            &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                          &lt;/div&gt;`
                      }
                    &lt;/div&gt;
                  &lt;/div&gt;
                `);
  </code></pre>
  
  <p>and I have a function right after it that shows</p>
  
  <pre><code>function completeTask(task){
      console.log(task) // this is just for testing purposes
  }
  </code></pre>
  
  <p>and I have data coming from the server that is being passed through as</p>
  
  <pre><code>field = {
      completed: Boolean,
      _id: String,
      task: String,
  }
  </code></pre>
  
  <p>Now, every time I select the complete button, I get the following error message: 
  <code>(index):1 Uncaught SyntaxError: Invalid or unexpected token</code>.</p>
  
  <p>And unfortunately, there isn't anything at (index):1, except for <code>&lt;DOCTYPE html&gt;</code></p>
  
  <p>Now, is this sort of thing even possible, or am I missing something?</p>