HTML code for Add New button:<div>  <a data-toggle=modal href=#addnewDepartment id=add-new-department-btn>Add New</a></div><div>  <a data-toggle=modal href=#addnewVehicle id=add-new-vehicle-btn> Add New </a></div>Modal Dialog frames:    <!-- Adding New Department --><div class=modal fade id=addnewDepartment>    <div class=modal-dialog>        <div class=modal-content>            <form:form id=add-new-department action=add-new-department method=POST commandName=department>            <div class=modal-header>                <button type=button class=close data-dismiss=modal aria-hidden=true>&times;</button><h4 class=modal-title>Add New Department</h4>            </div>            <div class=modal-body>                <div class=form-group>                    <form:label path=departmentname >Department</form:label>                    <form:input required=true path=departmentname class=form-control />                </div>        </div>    </div>        <p>&nbsp;</p>        <div id=department_status>&nbsp;</div>    <div class=modal-footer>        <input data-bb-handler=confirm type=submit value=Add>        <button type=button class=btn btn-default>Close</button>    </div>    </form:form>        </div><!-- /.modal-content -->    </div><!-- /.modal-dialog --></div>     <!-- Adding New Vehicle Type -->            <div class=modal fade id=addnewVehicle>                <div class=modal-dialog>                    <div class=modal-content>                        <form:form id=add-new-typeofvehicle action=add-new-typeofvehicle method=POST                            commandName=vehicle>                            <div class=modal-header>                                <button type=button class=close data-dismiss=modal                                    aria-hidden=true>&times;</button>                                <h4 class=modal-title>Add Vehicle Type</h4>                            </div>                            <div class=modal-body>                                <div class=form-group>                                    <form:label path=vehicletype class=col-md-5 control-label>Vehicle Type</form:label>                                    <div class=col-md-6>                                        <form:input path=vehicletype class=form-control />                                    </div>                                </div>                            </div>                            <p>&nbsp;</p>                            <div id=vehicle_status>&nbsp;</div>                            <div class=modal-footer>                                <input data-bb-handler=confirm type=submit                                    class=btn btn-primary value=Add>                                <button type=button class=btn btn-default                                    data-dismiss=modal>Close</button>                            </div>                        </form:form>                    </div>                    <!-- /.modal-content -->                </div>                <!-- /.modal-dialog -->            </div>jQuery AJAX call with validation:$(#add-new-department).validate({        // Specify the validation rules        rules : {            departmentname : {                required : true,                alphanumericsd : true            },        },        submitHandler : function(form) {                var departmentname = $('#departmentname').val();                $.ajax({                    url : $(#add-new-department).attr(action),                    type : POST,                    data : departmentname=+departmentname,                    success : function(response) {                        if($.isEmptyObject(response)) {                             $('#department_status').html('Sorry! Duplicate Record!').css('color','red').show().fadeOut(5000);                        }                        else {                            $('#department_status').html('New Dapartment Added Successfully').css('color','green').show().fadeOut(5000);                            $('#departmentname').val('');                            $('#department').append(new Option(response.departmentname,response.departmentid));                        }                    },                   error : function(e) {                    alert('Error: ' + e.responseText);                    }                 });        }    });    // Setup form validation on the #add-new-typeofvehicle element    $(#add-new-typeofvehicle).validate({        // Specify the validation rules        rules : {            vehicletype : {                required : true,                alphanumericsd : true            },        },        submitHandler : function(form) {            var vehicletype = $('#vehicletype').val();                $.ajax({                    url : $(#add-new-typeofvehicle).attr(action),                    type : POST,                    data : vehicletype=+vehicletype,                    success : function(response) {                        if($.isEmptyObject(response)) {                             $('#vehicle_status').html('Sorry! Duplicate Record!').css('color','red').show().fadeOut(5000);                        }                        else {                        $('#vehicle_status').html('New Vehicle Type Added Successfully').css('color','green').show().fadeOut(5000);                        $('#vehicletype').val('');                        $('#typeofvehicle').append(new Option(response.vehicletype,response.vehicleid));                        }                    },                   error : function(e) {                    alert('Error: ' + e);                    }                 });        }    });I want to minimize my code because I have so many add new options in my project. Please suggest ways to write only single code for modal dialog and one jQuery AJAX call as more general.
Modal dialog and jQuery AJAX calls based on button click
javascript;jquery;html;ajax;twitter bootstrap