Get input value with jquery mobile

I'm trying to get the value of a input and a textarea with jquery mobile and add the values inside a div using append() only that it's not working? Can someone tell me where I'm wrong?

The input and the textarea are within panel and I want to add the values set in it to content of the main page.

//Html da pagina principal que está dentro de data-role="page" e o id dessa page é id="index"
<section data-role="content">
        <h3>Todas as tarefas</h3>
        <div class="list">

        </div>
    </section>

//Inicio do Panel
<div data-role="panel" id="mypanel" data-display="overlay">
        <h4>Nova Tarefa</h4>
        <label for="tarefa">Adicionar Tarefas</label>
        <input type="text" id="tarefa" placeholder="Remédio, Mercado e etc...">
        <label for="detalhe">Detalhes</label>
        <textarea id="detalhe" cols="1" rows="1" placeholder="Exemplo: tomar remédio 'x', comprar leite e etc..."></textarea>
        <button type="button" id="btn" data-icon="check">Salvar</button>
    </div>

$( document ).on( "#index", function() {
    var nextId = 1;
    $("#btn").click(function() {
        var tarefa = $('input#tarefa').val(); //já tentei input[id=tarefa] e (#tarefa).
        var detalhe = $('textarea#detalhe').val(); //já tentei input[id=detalhe] e (#detalhe).
        nextId++;
        var content = "<div class='item" + nextId "'>" + tarefa + '</div>';
        $('.list').append(content);
    });
});