Confused about this code, can anyone help?

Confused about this code, can anyone help?

I am not sure why it doesn't work when I click on update button. It definitely goes inside the block and if I do an alert it works but the slideUp function doesnot work with the div. Anyone can shed some light please?
 
<script type="text/javascript">
  
     $(document).ready(function() {
          $('.update').click(function(){
           //alert('it works');
            $('#test').slideUp();
          });
});
  
  
</script>










 
<div id='test' style="background:#cc0000; width:300px; height:300px;"></div>
 <a href='#' id='clicklink'>click</a>
      <div class="green" id="record">                                
                            <strong>Order ID: 106889</strong>
                            <fieldset>
                            <li class="dialogNote" id="msgbox_106889" style="display:none"></li>
                            </fieldset>
                            <form method="post" name="106889">
                            <input type="hidden" id="userstatus_106889" value="MANUAL" />
                                                   
                            <input name="update" type="submit" value="UPDATE" class="update" id="106889" />
                            </form>
                           
                            <div style="clear:both"></div>
                        </div>