Jquery读取输入字段，从JSON循环创建

我怎么也弄不明白为什么这样不行。我正试图从json文件中创建一个循环的文本字段的值。

在这段代码中，在最底部，我只是做了一个简单的点击(function() {alert()}，看看我是否可以拉一个值，它的返回未定义。但是，如果我删除'#name'并放入'input'，它会捕获它，但只针对几个输入字段中的第一个。

任何帮助都是非常感谢的

{
"Controls": [{
    "Button":[{ "Name":"Button", "x": "1","y": "2","width": "3","height": "4","Transition":"" }],
    "Image":[{"x": "5","y": "6","width": "7","height": "8"}],
    "TextField":[{"x": "9","y": "10","width": "11","height": "12","Rows":""}]
}]

}

代码(上面有一些getJSON的东西)

//Slide In Attributes Panel Based on Selected Object
$(document).on('click', '#code li', function () {
    var index = $('#code li').index(this);
    var selected = $(this).text();
    switch (selected) {
        case selected:
            $('#options').hide();
            hidePanels();
            $('#temp').remove();
            $('#objectAttributes').show("slide", 200);
            break;
        //If it does work show what variable is being used
        default:
            alert(selected);
            break;
    }
    //Shows Selected LI Index
    $('#codeIndex').text("That was div index #" + index);
    //Pull list of Attributes for selected Object
    $.getJSON('controls.json', function (data) {
        //Build Attributes List
        var attributeList = '<div id="temp">';
        //Target based on selected object
        var target = selected;
        attributeList += '<div>' + target + '<div>';
        $.each(data.Controls[0][target][0], function (kk, vv) {
            attributeList += '<div style="float:right">' + kk + ':' + '<input type="text" id='+ kk + '>' + '</input>' + '</div>';
        });
        attributeList += '</div></div>';
        attributeList += '</div>';
        $('#objectAttributes').append(attributeList);
        $('#temp').append('<div id="editIndex">'+"Modifying index" + " " +index+'</div>');
        $(document).on('click', '#saveAttributes', function () {
            var $x = $('#name').val();
            alert($x);
        })
    });

});