Как спрятать все внутри элемента li и динамически вставить div

Question

Я использую Twitter-загрузчик.

   <div class="hero-unit span8 pull-right">
       <h5><span class="label label-info">General Account Settings</span></h5>
          <ul class="nav nav-list">
             <c:forEach items="${personUI}" var="entry">
                  <li id="${entry.key}">
                    <div class="span2 pull-left">
                       <span class="label">${entry.key}</span>
                    </div> 
                    <div class="span2">
                       <font size="2"><span><strong>${entry.value}</strong></span></font>
                    </div>
                    <div class="span2 pull-right">
                       <font size="2">
                          <span>
                             <a href="#" id="${entry.key}">
                             <span class="add-on">
                               <i class="icon-pencil"></i>
                             </span>Edit
                                <script type="text/javascript">
                                    $(function(){
                                         $(this).click(function(){
                                             $('li[${entry.key}]').hide();
                                         });
                                    });
                                 </script>
                               </a>
                          </span>
                      </font>
                    </div>
                  </li>
             </c:forEach>
          </ul>
   </div>
</div>

Когда пользователь нажимает кнопку редактирования, следующий элемент div должен динамически добавляться к элементу li, с которым связана кнопка редактирования. Форма внутри div также должна иметь кнопку отправки и закрытия. при отправке / закрытии div должно снова стать невидимым после процесса публикации и обновления соответствующего элемента li новым значением.

<!-- Name Edit div -->
<div id="nameEdit" style="display:none;">
  <form id="editname" action="<c:url value="/editname" />" method="post">
     <div class="control-group">
        <div class="controls">
            <input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline">
            <input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline">
        </div>
    </div>
  </form>
</div>

снимок

Answer 1

Вы можете посмотреть на следующий плагин для начальной загрузки

Редактировать Inline Pligin