Переместите каждый div определенного класса от начала до конца его родителя, используя jQuery

Из-за ошибки одного из наших системных разработчиков некоторые из выходных данных html в нашей системе выводятся в неправильном порядке. Поэтому, как разработчику интерфейса для системы, мне поручено внедрить временное исправление вывода html с помощью javascript, пока в нашу систему не будет применено исправление.

В настоящее время вывод html выглядит следующим образом:

 <div class="formdetails p_9 ">
    <div class="help">
        <a class="icamsPopup" onclick="popUp(this.getAttribute('href')); return false;" href="#">?</a>
    </div>
    <div class="no_mandatory_marker"></div>
    <div class="label">
        <label for="p_9" id="p_9ErrorMessage">Mobile Phone</label>
    </div>
    <div class="detail" id="ext-gen16">
       <input type="text" class="textfield x-form-text x-form-field" id="p_9" maxlength="20" size="100" name="p_9" style="width: 174px;">
    </div>
 </div>

Существует несколько div с классом formdetails, каждый из которых содержит другой элемент формы. Некоторые из них, как и в случае с этим, содержат раздел справки, который должен отображать вопросительный знак с возможностью нажатия после полей формы, которые направляют пользователя на соответствующую страницу справки, относящуюся к этому полю. Именно этот div.help вызывает проблему, поскольку наш разработчик почему-то включил это в начало.formdetails div, когда он должен быть в конце. Поэтому мне нужен небольшой скрипт jQuery, чтобы временно исправить эту проблему, чтобы каждый.help div появился в конце этого родителя.

До сих пор я пробовал следующее:

/* Force help market to appear at the end of fields */
jQuery(".formdetails .help").each(function(){
  jQuery(this).insertAfter(jQuery(this).parent(".formdetails div:last");
})

Любая помощь будет принята с благодарностью.