为什么我的jQuery没有在我创建的第二个div上添加显示？

Question

当我尝试添加第一个联系人并提交它时，它将显示在div id = contact中。函数hide / show正在运行。但是，只要我添加第二个联系人，它就不再起作用了。好像，jQuery没有进入显示...

function css(){
    $('.contacts').css('background-color', 'lightblue');
}

function visibility() {
    $("#vis").click(function(){
        $(".description").toggle();
        return false;
    });
};

$( document ).ready(function() {

    $("form").submit(function (event) {
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var desc = $('#desc').val();
        $('.contacts').append( "<div id='contact'>"+fname+"<br>"+lname+"<br><button id='vis'>Show/Hide</button><div class='description' style='display:;'>"+desc+"</div></div>");
        // alert(fname);
        event.preventDefault();
        css();
        visibility();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        First name: <input type="text" name="fname" id="fname"><br>
        Last name: <input type="text" name="lname" id="lname"><br>
    </fieldset>
    <fieldset>
        <legend>Description:</legend>
        <textarea id="desc" value="desc"> </textarea><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<div class="contacts"> </div>

Answer 1

正如我在评论中写的那样 - 你不能在html中拥有多个具有相同ID的元素。您也不必为每个按钮添加侦听器。您可以为body和selector添加侦听器作为第二个参数（请参阅附带的代码）。

function css(){
    $('.contacts').css('background-color', 'lightblue');
}

$( document ).ready(function() {
  //this way you don't need to add listener for each button
  $('body').on('click', '.vis', function() {
    $(this).closest('.contact').find('.description').toggle();
  });
  
  $("form").submit(function (event) {
    var fname = $('#fname').val();
    var lname = $('#lname').val();
    var desc = $('#desc').val();
    $('.contacts').append( "<div class='contact'>"+fname+"<br>"+lname+"<br><button class='vis'>Show/Hide</button><div class='description'>"+desc+"</div></div>");
    event.preventDefault();
    css();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        First name: <input type="text" name="fname" id="fname"><br>
        Last name: <input type="text" name="lname" id="lname"><br>
    </fieldset>
    <fieldset>
        <legend>Description:</legend>
        <textarea id="desc" value="desc"> </textarea><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<div class="contacts"> </div>