JQuery克隆div元素，其中包含几行html，之后隐藏并显示克隆的div'；有几行

请告诉我为什么我不能隐藏和显示新的克隆项目

代码如下：

HTML:

啤酒厂类型：


咖啡
茶叶
酿酒商：


咖啡1
咖啡2
咖啡
酿酒商：


tea1
tea2
tea3
订购啤酒厂数量（件）：



这个想法，你应该做什么：

选择brewer类型以查看功能如何工作
按文本“+添加”添加新选择
更改新克隆项的“brewer type”选择器
a） 为什么它不隐藏和显示；b） 为什么克隆的东西功能在第一个选择器上工作
我做这件事不明智。。我甚至觉得答案很简单，我唯一需要做的就是睡觉^_^

顺便说一下，我已经改变了很多事情，并试图完成这件事，但我没有任何新的想法。谢谢你们的帮助，伙计们！；）
 请不要试图绕开SO的规则，即JSFIDLE链接必须附带代码。首先，开头的
.hide（）
应该在
ready
函数中。克隆元素时，您正在创建重复的ID。ID必须是唯一的。您应该为重复的元素使用类。id应该是唯一的，因此，既然您要克隆元素，就不要使用id-而是使用类-所以您告诉我，所有的问题只是因为我使用id而不是类来克隆对象？：^）
<div id="adding_copy_part" style="margin-bottom: 10px;">
    <div style="display: inline-block;">
        <label for="title">Brewer Type:</label>
        <br />
        <select id="brewer_type" name="brewer_type1">
            <option value=""></option>
            <option value="Coffee">Coffee</option>
            <option value="Tea">Tea</option>
        </select>
    </div>
    <div class="brewer_type_select" id="coffee_brewer_select_div" style="display: inline-block; padding-left: 10px;">
        <label for="title">Brewer:</label>
        <br />
        <select name="coffee_brewer1">
            <option value="">coffee1</option>
            <option value="Coffee">coffee2</option>
            <option value="Tea">coffee3</option>
        </select>
    </div>
    <div class="brewer_type_select" id="tea_brewer_select_div" style="display: inline-block; padding-left: 10px;">
        <label for="title">Brewer:</label>
        <br />
        <select name="tea_brewer1">
            <option value="">tea1</option>
            <option value="Coffee">tea2</option>
            <option value="Tea">tea3</option>
        </select>
    </div>
    <div style="display: inline-block; padding-left: 10px;">
        <label for="title">Ordered Brewer Amount (pcs):</label>
        <br />
        <input type="text" name="ordered_amount1" id="ordered_amount"></input>
    </div>
</div>
<div id="add_fields_button"> <a style="cursor: pointer;">+ Add</a>

</div>

$('.brewer_type_select').hide();

$(document).ready(function () {

    $("select#brewer_type").change(function () {
        $('.brewer_type_select').hide();
        if ($(this).val() != "") {
            /*$('div#add_fields_button a').after($(this).val().toLowerCase());*/
            $('#' + $(this).val().toLowerCase() + '_brewer_select_div').show();
        }
    });

    $('div#add_fields_button a').click(function () {
        $test_location = $('div#adding_copy_part').last().children().first().children().last();
        $test_location.css("background-color", "green");
        /*$(this).before($(this).parent().prev().clone());*/
        $(this).parent().prev().after($(this).parent().prev().clone(true));
        $test_location = $('div#adding_copy_part').last().children().first().children().last();
        $test_location.css("background-color", "blue");


        $(this).before('<br /> class: ' + $test_location.attr('class') + ' || id: ' + $test_location.attr('id') + ' //end.');
        $(this).parent().prev().children().each(function () {
            $(this).find('input').each(function () {
                $(this).val('');
            })
        });

    });
});