I am making a sortable list using the *SortableJS* [library](https://github.com/SortableJS/Sortable). The library makes all HTML elements inside a specified id=""-tag draggable and sortable. For example: 

```
<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

```

I am using JavaScript to generate the HTML elements and wish to make the id dynamic. The following works as intended:

```
// Several list items are generated and wrapped in this <div>
var wrapper = document.createElement('div');
wrapper.id = 'foo';
Sortable.create(foo, options);

```

When I attempt to make the id dynamic it throws an error: 

```
// Several list items are generated and wrapped in this <div>
// An input exists with id="userGivenListName"
var listName = document.getElementById('userGivenListName').value;
var wrapper = document.createElement('div');
wrapper.id = listName;
Sortable.create(listName, options);

```

> 
> Uncaught Sortable: `el` must be an HTMLElement, not [object String]
> 
> 
> 

When I `console.log(wrapper.id);` after typing "foo" into my form it returns the exact same as when I `console.log(wrapper.id);` in the above, working code.

I have attempted to add single-quotes with no success: 

```
wrapper.id = "'" + listName + "'";

```