Как мне вставить сообщение об ошибке после определенного блока l oop?

Question

Я пишу электронную книгу. Я использую al oop для вывода телефонных номеров. Я использую плагин jQuery Maks and Validator. Но текст ошибки выводится после каждого блока div. Как я могу сделать вывод только после блока, в котором есть ошибка? Любая помощь будет принята с благодарностью.

введите описание изображения здесь

введите описание изображения здесь

Мой HTML код:

<form action="${pageContext.request.contextPath}/editDone" id="updateForm" class="form-horizontal form-back" method="post" enctype="multipart/form-data">
//code blocks
    <div class="form-group">
         <label class="col-sm-2 control-label">Телефоны</label>
             <div class="col-sm-10">
                <div class="phones">
                   <div class="input-group phone-input">
                      <div class="input-group-btn">
                         <select class="btn btn-default dropdown-toggle" name="phones[1].phoneType" aria-expanded="false">
                           <option value="HOME" selected>Домашний</option>
                           <option value="WORK">Рабочий</option>
                         </select>
                      </div>
                      <input type="text" name="phones[1].number" class="mask-phone form-control"
                                       value="${phone.number}"/><br>
                         <span class="input-group-btn">
                           <button class="btn btn-danger btn-remove-phone m8" type="button">
                            <span class="glyphicon glyphicon-minus"></span></button>
                         </span>                              
                   </div>
-----------------------------------------------------
                   <div class="input-group phone-input">
                      <div class="input-group-btn">
                         <select class="btn btn-default dropdown-toggle" name="phones[20].phoneType" 
                             aria-expanded="false">
                           <option value="HOME" selected>Домашний</option>
                           <option value="WORK">Рабочий</option>
                         </select>
                      </div>
                      <input type="text" name="phones[20].number" class="mask-phone form-control"
                                       value="${phone.number}"/><br>
                         <span class="input-group-btn">
                           <button class="btn btn-danger btn-remove-phone m8" type="button">
                            <span class="glyphicon glyphicon-minus"></span></button>
                         </span>                              
                   </div>

JS:

jQuery.validator.addMethod("checkMask", function(value, element) {
    return /\+\d{1}\ \(\d{3}\)\ \d{3}-\d{2}-\d{2}/g.test(value);
}, "Error!");

$(function () {
    $.validator.addClassRules({
        'mask-phone': {
            checkMask: true
        }
    });

    $('#updateForm').validate({
        errorPlacement: function(error, element) {
            if (element.hasClass('mask-phone')) {
                 error.insertAfter('.phone-input')
            }
        }
    });
$('.mask-phone').mask("+9 (999) 999-99-99", {autoclear: false});

Answer 1

Проблема решена добавлением строки 'p'

$('#updateForm').validate({
        errorElement: "p",
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent("div"));
        },
        success: function(error) {
            error.remove();
        }
});