функция showhide в динамически создаваемой форме не работает

Я разрабатываю веб-страницу с формой, которая создается динамически с помощью javascript (jquery). Для каждого (повторяющегося) набора элементов формы добавлена функция Show/hide, чтобы показать и скрыть элементы, и я не получаю этот рабочий код show/hide. Я подозреваю, что ошибка указана в коде ниже, и я думаю Я изо всех сил стараюсь поставить кавычки в нужное место (?) Консоль указывает на ошибку "Uncaught SyntaxError: Неожиданный токен", который я не понимаю; при исключении предполагаемой ошибочной строки ошибок больше нет, и я не вижу, где это '}' появляется там, где он не должен появляться.

Код Javascript:

function ShowHide(id) {
    $(id).toggle();
}


$(document).ready(function () {

    var buildform = function () {
        var form ='<div id="form">'

        for (var i = 0; i < 2; i++) {

            form += '<div id="filename"' + i + '> Document  </div> </td>';
            //error in next line (?)
            form += '<button onclick="ShowHide(\'#filename'+ i +'\')">  Show/hide document </button> </td> </tr>';

        } //for i
        form += '</div>'; //id="form"
        console.log('FORM: '+form);
        return
    } //buildform()

   $("#wrapper").append(form);

}); //$(document).

Код HTML:

<div id="wrapper"></div>

Вывод javaconsole():

<div id="form"><div id="filename"0> Document  </div><button onclick="ShowHide('#filename0')">  Show/hide document </button></div><div id="filename"1> Document  </div><button onclick="ShowHide('#filename1')">  Show/hide document </button></div>