Массивы JQuery из объектов innerHTML

Изучение кода и проблема с созданием массивов из объектов jQuery. Я хотел бы дать пользователю возможность добавлять столько «Любимых книг», сколько они хотят в свой профиль.

Пользовательский интерфейс написан на jQuery,

<script language="javascript">
    function one()
    {
        var i = 1;
        my.innerHTML = my.innerHTML +"<br><input type='text' name='title'+i[] >"
        var n = 1;
        [
        div.innerHTML = div.innerHTML +"<br><input type='text' name='author'+n[] >"
        ]
    }
</script>

Я пытался:

var obj = $('input');
var arr = $.makeArray(obj);

Я надеялся, что это действительно так просто, но результат такой:

<div id="div">
<br>
<input type="text" +n[]="" name="author">
<br>
<input type="text" +n[]="" name="author">
<br>
<input type="text" +n[]="" name="author">
</div>

Я попробовал вариант номер два, который нашел здесь, но дал мне тот же результат:

var author = new Array();

//get all the authors
$('.auth input').each(function (i)
{
    var author= $(this).val();

    if(author!= '')
    {
        author[author] = author;
        alert(author.length);
    }
});

и те же результаты. Я надеялся на такой результат:

<div id="div">
<br>
<input type="text" name="author[0]">
<br>
<input type="text" name="author[1]">
<br>
<input type="text" name="author[2]">
</div>

поэтому я могу разобрать массив PHP.