Insert items to List in Razor with Model

Question

Regarding to the title, i got a problem that needs to insert items to List of Model in Razor.

My Razor:

@model List<Ordersnack>
<h4>Order Snack</h4>
@using (Html.BeginForm("ordersnack", "api"))
{
    <div id="target">
        @Html.TextBoxFor(x => x[0].itemcode, new { @placeholder = "item", @id = "item" })
        @Html.TextBoxFor(x => x[0].qty, new { @placeholder = "quantity", @id = "qty" })

    </div>
    <input type="button" id="addclone" onclick="addcloneitem()" value="New Item(s)" />
    <input type="submit" value="Load XML" />
}

i'm using Jquery Clone to making clone of its Textbox

<script>
function addcloneitem() {
        alert('called');
        $("#item").clone(true).val("").appendTo("#target");
        $("#qty").clone(true).val("").appendTo("#target");
    }
</script>

However when i do add clone, the items only got Index 0 of List, result:

<input id="item" name="Model[0].itemcode" placeholder="item" type="text" value="">
<input id="qty" name="Model[0].qty" placeholder="quantity" type="text" value="">
<input id="item" name="Model[0].itemcode" placeholder="item" type="text" value="">
<input id="qty" name="Model[0].qty" placeholder="quantity" type="text" value="">

i want that index of textbox dynamically increase (eg. [0],[1],[2]) when i add its clone, what should i do?