jquery .append og brug af intre variabler

Hej Eksperter,

Jeg sidder med en kode der ikke vil virke for mig.

Jeg ønsker at tilføje en række med ekstra input felt - disse skal have et unikt id.

Jeg kan få koden til at virke UDEN id men ikke med.

Her er koden:
<script>
        $(document).ready(function($)
            {
                $("a").click(function(event){
                    alert("Handler for .click() called.");
                    htmlStr = '<tr>'
htmlStr += '<td><input type="text" name="cirteria[][name]"></td>'
htmlStr += '<td><input type="checkbox" name="cirteria[][parent]" value="1"></td>'
htmlStr += '<td><input type="checkbox" name="cirteria[][child]" value="1"></td>'

htmlStr += '</tr>'
                     
                    $('#criteria').append(htmlStr);
                });
            });
    </script>

og med id
<script>
        $(document).ready(function($)
            {
                var i = 1;
                $("a").click(function(event){
                    alert("Handler for .click() called.");
                    htmlStr = '<tr>'
htmlStr += '<td><input type="text" name="cirteria['+ i +'][name]"></td>'
htmlStr += '<td><input type="checkbox" name="cirteria['+ i +'][parent]" value="1"></td>'
htmlStr += '<td><input type="checkbox" name="cirteria['+ i +'][child]" value="1"></td>'

htmlStr += '</tr>'
                     
                    $('#criteria').append(htmlStr);
                        i++;
                });
            });
    </script>

Der sker INTET med den "nye" kode.

Håber på hjælp på forhånd tak