最亲密的，其次，兄弟姐妹赢了'不起作用.动态形状构建

我有一个表单，通过上一页上的用户输入和按钮，用户可以定义要分配给设备的"属性"数量。

该页面要求用户为每个属性定义一个名称和类型。如果用户从选择列表中选择"选择选项列表"，则会通过jquery append"add"显示一个按钮，该按钮应允许用户添加文本输入以添加选项。然而，使用最近的、下一个和兄弟姐妹，该操作不起作用。它可以在不使用任何这些的情况下工作，但它会为页面上"选项"类的每个实例分配一个文本输入。

由于某些原因，代码无法正常工作，所以我不得不复制并粘贴整个页面的代码。

<!-- Declare num variable from form on previous page -->
<?php echo "<script> var num='"".$_POST['number-of-attributes']."'";</script>"; <script type="text/javascript>
//variable to count the number of attributes
count=0;
//Convert Php post to an int
num=parseInt(num, 10);
//This method inserts the number of attributes present in the param
function addAttribute (input) {
    for(var i=0; i<input; i++) {
        var template="<div class='"new-attribute'">"
                 + "<h3>New Attribute</h3>"
                 + "<label for='"attributeName"+count+"'">Name:</label>"
                 + "<input class='"attribute'" type='"text'" name='"attributeName"+count+"'">"
                 + "<label for='"attributeType"+count+"'">Type:</label>"
                 + "<select class='"tattribute'" name='"attributeType"+count+"'">"
                 + "<option value='"text'" selected>Text</option>"
                 + "<option value='"checkbox'">Checkbox</option>"
                 + "<option value='"select-list'">Select Option List</option>"
                 + "<option value='"notes'">Notes</option>"
                 + "</select>"
                 + "<div class='"option'"></div>"
                 + "<div class='"remove'">Delete</div>"
                 + "</div>";
            $(template).appendTo('#attributes');
            count++;
            $("input[id=count-field]").val(count);
    }           
}
//JQuery does its stuff
    $(document).ready(function() {

        //Add the required number of attributes
        if(num!=null) {
            addAttribute(num);
        }
        //Add one attribute on click
        $("#new").on('click', function() {
            addAttribute(1);
            //Remove current of clicked 
            $(".remove").on('click', function() {
                $(this).closest('.new-attribute').remove();
            });
        });
//Remove current of added
        $(".remove").on('click', function() {
            $(this).closest('.new-attribute').remove();
        });
        //select temp
        var select="<div id='"new-option'">"
                 + "<div class='"btn'">add</div>";   
                 + "</div>";
        var add= "<label for='"attributeOption"+count+"'">Name:</label>"
                 + "<input class='"attribute'" type='"text'" name='"attributeOption"+count+"'">";        
        //get value of select
        $('.tattribute').change(function() {
           //Add extra fields for select
            if (this.value == "select-list") {
                $(this).next('.option').append(select);
                $(".btn").on('click', function() {
                    $(this).next('.option').append(add);
                });

            }   
            //Remove extra fields if not a select
            else {
                    $(this).next('.option').empty();
            }
        });
    });

#new {
    width: 150px;
    height: 50px;
    background: blue;
    cursor: pointer;
}
.remove {
    width: 50px;
    height: 50px;
    display: block;
    background: red;
    cursor: pointer;
}
.btn {
    width: 100px;
    height: 20px;
    display: block;
    background: green;
    padding: 5px;
    cursor: pointer;
}

<form id="form" name="new-user" action="update.php" method="post">
    <label for="device-name">Name of Device Type:</label>
    <?php echo $_POST['device-name']; ?>

    <div id="new">New Attribute</div>
    <div id="attributes">
    </div>
    <input id="count-field" class="hidden-field" type="hidden" name="total" value="">
    <input class="hidden-field" type="hidden" name="device-name" value="<?php echo $_POST['device-name']; ?>">
    <input class="submit-button" type="Submit" value="Submit">
</form>