Fix greedy checkbox/label wrapping on list elements

Grabbing the entire `innerHTML` for each list item in `$('li)` is too greedy, and can lead to problems when the output is rendered where CSS styles are applied to first/last-children.

Example Markdown:

```markdown
- [ ] item
  - sub-item
  - [ ] sub-item
- item
```
Currently, processing the markdown above yields the following HTML:

```html
<ul>
  <li>
    <label>
      <input type="checkbox" class="task-list-item-checkbox">item
        <ul>
          <li>sub-item</li>
          <li>
            <label>
              <input type="checkbox" class="task-list-item-checkbox">sub-item
            </label>
          </li>
       </ul>
    </label>  <!-- first label closed here -->
  </li>
  <li>item</li>
</ul>
```

Note that the first `<label>` tag wraps both `sub-item`s.

Instead of the entire `innerHTML`, only get the list item that requires the checkbox rendered, and then append the children back on only after the `<label>` tag has been closed.

This pull request fixes the processing and yields the following HMTL:

```html
<ul>
  <li>
    <label>
      <input type="checkbox" class="task-list-item-checkbox">item
    </label>  <!-- first label closed here -->
    <ul>
      <li>sub-item</li>
      <li>
        <label>
          <input type="checkbox" class="task-list-item-checkbox">sub-item
        </label>
      </li>
    </ul>
  </li>
  <li>item</li>
</ul>
```

Note that the first `<label>` tag only wraps the list item that requires a checkbox and nothing more.

I added a test case to test/markdown.md starting on line 29 that should illustrate the problem with leading checkboxes.

Let me know if there are any questions/issues with what I've done.