jquery - custom html inside errorElement of jquery Validate

Question

I'm putting my error message inside a div (errorElement) and giving it errorClass:"callout border-callout error, which I require to custom style it. This is how it looks now:

<input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/>
<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    Here is my error message
</div>

but I want two more elements inside this errorElement so i can style it properly. Ideally, it should look as follows:

<input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/>
<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    Here is my error message
    <b class="border-notch notch"></b>
    <b class="notch"></b>
</div>

My current jquery validate code:

$(function() {
    $('#form1').validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            fname: {
                required: true,
            },
            lname: {
                required: true,
            }

        },
        messages: {
            email: {
                required: 'Please enter your email',
                email: 'Please enter a valid email'
            },
            fname: {
                required: 'Please enter your First Name',
            },
            lname: {
                required: 'Please enter your Last Name',
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                dataType: 'json',
                success: function(jsonResponse) {
                                //Example json object returned by server: [false, "You have already subscribed!"]
                                var notyType;
                                if (jsonResponse.response) {
                                    notyType = 'success';
                                } else {
                                    notyType = 'error';
                                }
                                showNoty(jsonResponse.message, notyType);
                            }
                        });
        },
        errorClass: "error callout border-callout",


    });


});

UPDATE:

<form method="post" id='form1' class="subscription-form">
   <div class="subscription-form-email">
       <span class="input-row"><input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/></span>
       <div id="email-id" class="callout border-callout error" style="display:none"> 
            <b class="border-notch notch"></b>
            <b class="notch"></b>
       </div>
       <span class="input-row"><input type="text" id="fname" name="fname" placeholder="First Name"/></span>
       <span class="input-row"><input type="text" id="lname" name="lname" placeholder="Last Name"/></span>
   </div>

   <input type="submit" value="SUBSCRIBE" class="submit-button" name="submit" id="submitButton" title="Click here to submit your message!" />

</form>