formの要素を増やして、ユニークなnameを付ける


以下のinput要素をボタンを押すと要素が増えるといった仕組みを作りたいと思っています。  
ただ、新しく生成した要素のnameはtext_title1やtext_html1といったユニークなものにしたいです。  
どのようにすればうまくいきますでしょうか。  
詳しい方、ご教示下さい。宜しくお願い致します。

[code]

    <li><input type="text" placeholder="タイトル" name="text_title" style="width:400px;height:20px;margin-bottom:10px;"></li>
    <li><textarea placeholder="内容" name="text_html" style="width:400px;height:300px;"></textarea></li>
    
[/code]




タグにjQueryがあるので、その例です。`.append()`で親要素`ul`の中に`li`を追加します。

[code]

    var number = 1;
    
    $(function(){
        $("#button").click(function(){
            $("#ul").append('<li><input name="text_title' + String(number) + '" type="text" placeholder="タイトル" style="width:400px;height:20px;margin-bottom:10px;"></li>');
            $("#ul").append('<li><textarea name="text_html' + String(number) + '" placeholder="内容" style="width:400px;height:300px;"></textarea></li>');
            number++;
        });
    });
    
[/code]

