добавить много редактируемого div

Question

Я пытаюсь создать много редактируемого текста div. Я могу редактировать, но только первый div.

$(function() { 
     $(".add-new").click(function() { 
      $('.image').append("<div id='new-text'></div>") 
     }); 
     $('#writable').keydown(function() { 
      var writable_value = $('#writable').val(); 
      $('#new-text').html(writable_value) 
     }); 
    } 
) 

моя форма

<form> 
     <input type="text" id="writable"> 
     <buton type="button" class="btn btn-primary add-new">add new text</buton> 
</form> 

и если я нажимаю на выбранном DIV я могу редактировать его

Answer 1

DEMO

Вот что вы можете сделать:

Добавить динамический id каждый раз, а затем изменить значение всех editable DIV которого id начинается с некоторой общей стоимостью:

$(function() { 
     var count=0;//global variable to add unique id div 
     $(".add-new").click(function() { 
      $('.image').append("<div id='new-text_"+count+"' contenteditable>Edit me</div>") 
      //divs will be new-text_1,new-text_2 etc., 
      count++; 
     }); 
     $('#writable').keydown(function() { 
      var writable_value = $('#writable').val(); 
      $("div[id^=new-text]").text(writable_value); 
      //The above selector changes values of all div whose id starts with new-text 
     }); 
    } 
) 

---

UPDATE

Получил вашу точку добавления более div и редактирования и замены текста. Вам просто нужно изменить ниже линии

$("div[id^=new-text]").text(writable_value); 

в

$("div[id^=new-text]:last").text(writable_value); 
//Always target the last added textbox 

UPDATED DEMO