Jquery for adding-delete button is not working : For one of my clients, I have developed an inquiry form as per the need. The data to be entered may be of multiples for which I designed the dynamic form so that the rows may be increased or decreased. The add button in the form  is working fine but the delete button is not working. 

Please check the  [DEMO][1] and code is given below.

  [1]: http://www.piperate.com/contact.html

    <style type="text/css">
    .k input { width:95px; margin: 2px;}
    .i  { width:40px; margin: 3px; text-align: center;}
    .l  { width:390px; margin: 3px; text-align: left;}
    .j  { width:95px; margin: 3px; text-align: center;}
    .m  { padding: 10px; margin: 5px; font-weight: bold; line-height: 25px;}
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script> <!-- add /del rows -->
    $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID
        
        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div><input type="text" class="i"  name="sl[]"><input type="text" class="l"  name="item[]"><input 
    
    type="text" class="j"  name="unit[]"><input type="text" class="j"  name="qty[]"/>&nbsp;<a href="#" class="remove_field">X</a></div>'); 
    
    //add input box
                 }
        });
        
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
    </script>  

**DATE PICKER**

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    
      <script> <!-- date picker-->
      $(document).ready(function() {
        $(".datepicker").datepicker({ dateFormat: 'dd-M-yy' });
      });
      </script>


**HTML FORM**

        <form method="post" action="xxx/enq.php"> 
             <label>Name:</label>
             <input type="text" name="com" />
             <label>Required at: </label>
             <input type="text" name="req2" />
             <label> Location: </label>
             <input type="text" name="place" />
             <label>Required Dt: </label>
             <input type="text" name="req1" class="datepicker" />
        
        <div class="input_fields_wrap">
            <table><tr><td class="i">SL </td><td class="l">ITEM DESCRIPTION</td>
            <td class="j">UNIT</td><td class="j">QTY </td</tr></table>
            <input type="text" class="i"  name="sl[]"><input type="text" class="l" name="item[]">
            <input type="text"  class="j" name="unit[]"><input type="text"  class="j"  name="qty[]">
            <button class="add_field_button">+</button>
        </div>
    
        <input type="submit" name='submit'  onclick="show_confirm()" value="SUBMIT">
        <input type="reset" value="CLEAR">
    </form>

I have tried in number of ways and googled but in-vain. Could any one help me in this regard please.