Only the following pages were consulted:
- [ListView](https://api.jquerymobile.com/listview/) - mostly **Split button lists** section
- [IconClasses](https://api.jquerymobile.com/classes/#icons)
- [Fly's code](https://pastee.org/np5zk)

## HTML
### Element
According to the listView page, when wanting a split button, the children of the `li` has to be anchors so the `span` containing the todo text was changed to a `a`.

### Classes
Getting the view of W3School or as in the ListViews page is build upon using the anchor and correct classes for the children. They were all found using the inspection/developer tool of the browser on the examples for the ListView page.

#### Todo class
The anchor having the todo text only has the `ui-btn` class added to push the delete icon to the right, for the spacing around it, its color and hover effect.

#### Delete button classes
It has the following added:
- `ui-btn` for styling
- `ui-btn-icon-notext` to hide the 'Remove' text and only have the button displayed - the text is there for accessibility.
- `ui-icon-delete` to make the icon the delete icon - as seen from the IconClasses page.
- `ui-btn-a` this is linked to the theme and is as is on the ListView page example. Other options that you can try is `ui-btn[a-z]`
- `remove` is added to bind the remove action in JS to this anchor only (and not the text too)

#### Li class
It has the `ui-li-has-alt` class added which works with the `ui-btn` class to have the text and icon next to each other.

## JS
Only a few things changed here, but here are the lines that has changed (as they are in the last working fiddle)

### 14-28
Here the `createTodoLi` function is declared to follow the Don't Repeat Yourself (DRY) principle of coding. The "Add Task" action had code to create the `li` for a todo as well as the loop which populates the listView. They both call this function when needed - otherwise a layout change would mean changing the code in each of them.

Most of it is based on Fly's code with the classes mentioned above added. And the "X" for the icon text is replaced with "Remove" to help users using accessibility browsers/devices.

### 35-38
This is the loop that populates the list on page load. It is fly's code, but calls the function above to create each `li`.

It is considered bad practise to have things update the UI inside a loop since it slows down the page. This is why all the items (`li`s) is only appended after the loop has run in line _38_.

### 47
The click is only binded to the `a.remove` and not all `a`s of a `li`. This prevents the items from being deleted when only clicking the text to edit them.

### 90
Here the above function is called again to get the `li` when a new task is added.

### Removed code
The code that would fade the delete icon in and out on the `mouseover` event is removed because they targeted all `a` and would therefore make it seem as if the todo item has been deleted after hovering the mouse over it.

And changing it to target the icon only would leave a cap in the list as that space would then be white.