[Adigezalov]

Всем привет.
Подскажите, пожалуйста.

У меня есть 2 формы на одной странице, которые имеют следующий вид:

Форма 1:

<div class="callback-form .....">
    ...............
    ...............
    ...............
    <div ......>
        <div class="input-group">
           <input type="text" class="form-control callback-name" placeholder="Имя...">
        </div>
        <div class="input-group">
           <input type="text" class="form-control callback-phone" placeholder="Телефон...">
        </div>
    </div>
    <div ......>
       <button type="button" class="btn callback-button" onclick="callBack()">Отправить</button>
    </div>
</div>

Форма 2:

<div class="callback-form">
   <div class="input-group">
      <input type="text" class="form-control callback-name pull-left" placeholder="Имя...">
      <input type="text" class="form-control callback-phone pull-left" placeholder="Телефон...">
   </div>
   <button type="button" class="btn callback-button" onclick="callBack()">Отправить</button>
</div>

JS:

function callBack() {
    var callbackName = $(this).parents('.callback-form').find('.callback-name');
    var callbackPhone = $(this).parents('.callback-form').find('.callback-phone');
 
    var name = $.trim(callbackName.val());
    var phone = $.trim(callbackPhone.val());
}

Собственно вопрос: почему при нажатии на кнопки переменные name и phone все равно остаются пустые?? Что я делаю не так?