Создайте больше divs, которые показывают текстовые поля после опции, выбранной с помощью jquery

Question

У меня есть научные статьи, которые я хочу записать. каждая статья имеет множественные ссылки (до 100), а ссылка может быть книгой или статьей. если ссылка - это книга, у меня есть имя автора книги, номер страницы книги и т. д. если это статья, то я должен получить опубликованный журнал статьи, опубликованный год статьи и т. д. (там являются отличиями).

поэтому, я хочу, чтобы пользователь выбирал, если это статья или книга из выпадающего меню. то соответствующие текстовые поля будут видны. пользователь заполняет связанную информацию и ссылку 1 в порядке. то он будет нажать кнопку Добавить, чтобы добавить ссылку на другую, так что он видит первый будет выпадающее меню первым, он выбирает опцию, и появляются связанные Textboxes .. вот что у меня есть,

HTML:

<div id="content">  
<select id="select"> 
       <option value="">-chooese-</option> 
       <option value="article">article</option> 
       <option value="book">book</option> 
    </select> 

    <input class="article" name="ref_author_name[]" type="text" id="ref_author_name" /> 
    <input class="article" name="ref_article_title[]"type="text" id="ref_article_title" />  
    <input class="book" name="ref_author_name[]" type="text" id="ref_author_name" /> 
    <input class="book" name="ref_thesis_title[]" type="text" id="ref_thesis_title" /> 
    <input class="button-a" type="button" value="add"/> 
</div> 

JQuery

$(function() { 
     $('#select').change(function() { 
      $("input").hide().filter("." + $(this).find("option:selected").val()).show(); 
      $(":button").show(); 
     }); 
     $(":button").click(function(){ 
      $('#content').clone().add('#content').appendTo(document.body); 
     }); 
    }); 

теперь, что случается, когда я выбираю книгу (первая ссылка), появляются связанные текстовые поля, если я изменить возможность заказать, появляются связанные книги Textboxes. в первом поле выбора нет проблем.

но, когда я нажимаю кнопку добавления, появляется новое раскрывающееся меню (2-я ссылка), и я выбираю вариант, похожие текстовые поля появляются снова. НО, все изменения в выборе, включая первый выбор.

Я очень новичок в jQuery, и я думаю, что может возникнуть крошечная проблема, но я не могу найти. любая помощь глубоко оценена. .

Answer 1

Я сделал эту скрипку для вас: http://jsfiddle.net/MXXXT/16/

в общем, что я делаю, это создать шаблон для каждого варианта, и клонировать его, а затем показать его (как шаблон по умолчанию скрыт, см CSS).

Надеюсь, что это поможет.

Отредактировано: Fiddle updated