JQuery привязка событий к нескольким экземплярам на странице

Question

У меня есть сценарий, работающий точно так, как мне нужно, только сейчас я не могу его реплицировать на странице - jquery принимает текстовые поля и редактирует их на основе нажатых кнопок , однако мне нужно, чтобы каждый текстовый ящик имел собственный набор кнопок. Вот мой код:

HTML код:

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" id="button" /> 
<input type="button" value="Click Me 2" id="button2" /> 

<br /><br /> 

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" id="button" /> 
<input type="button" value="Click Me 2" id="button2" /> 

JavaScript код:

$(function() { 
$('#button').on('click', function() { 
    var text = $('#text'); 
    text.val(text.val() + "\n\nafter clicking");  
}); 
$('#button2').on('click', function() { 
    var text = $('#text'); 
    text.val(text.val() + "\n\nafter clicking 2");  
}); }); 

JS Fiddle:

https://jsfiddle.net/42ssmu0t/

Спасибо, что помогли мне понять это!

Answer 1

Используйте это:

$(function() { 
     $('*#button').on('click', function() { 
      var text = $('#text'); 
      text.val(text.val() + "\n\nafter clicking"); 
     }); 
     $('*#button2').on('click', function() { 
      var text = $('#text'); 
      text.val(text.val() + "\n\nafter clicking 2"); 
     }); 
    }); 

Answer 2

Я обновил код на скрипку

Updated Fiddle

здесь обновленный код:

$(function() { 
$('*#button').on('click', function() { 
    var text = $(this).prevAll('#text').eq(0); 
    text.val(text.val() + "\n\nafter clicking");  
}); 
$('*#button2').on('click', function() { 
    var text = $(this).prevAll('#text').eq(0); 
    text.val(text.val() + "\n\nafter clicking 2");  
}); 
});