Datatable datalist selected value

Question

Please, what is wrong with this code. Adding the selected value from a datalist to datatables is not working. What am I doing wrong? This is the HTML code:

<tr><td><label for = "user">User</label></td>
    <td><input id = "user" list = "user" ></input></td></tr>
    <datalist id = "user">
        <option value = "State">
    <option value = "Area">
    <option value = "Region">
    <option value = "Town">
    </datalist>

This is the jQuery code:

$(document).ready( function () {
    $('#table_id').dataTable();
    $('#addbtn').click(addrow);
    } );

        function addrow() {
    $('#table_id').dataTable().fnAddData
        ( [
            $('#age').val(),
                $('#user option:selected').val()
            );}

Answer 1

Both your input and your datalist have the ID #user. Only one element with the same ID is allowed on a page. Change the ID of one of the two to something else.