jquery - jQuery clone() が機能しない

Question

私は非常に単純な jQuery を持っていますclone():

<script type="text/javascript">
    $("#reset").click(function () {
        location.reload(); 
    });
    $("#clone").click(function () {
       //$('.hq').clone().insertAfter(".hq");
       $('.hq').clone().appendTo('.hq');
    }); 
</script>                        

 <div class="hq">
    <div class="textboxs">
         <select name="hq">
              <option value="-1">Select Headquarter</option>
                <?php for( $i = 0; $i < count( $get_hq_r ); $i++ ) { ?>
                  <option value="<?php echo $get_hq_r[0]['id']; ?>"><?php echo $get_hq_r[$i]['name']; ?></option>
                <?php } ?>
         </select>    
    </div>
 </div>
<button id="clone">Add more</button> <button id="reset">Reset</button>

しかしAdd more、divのクローンを作成する代わりにボタンをクリックすると、ページが更新されます!