Как переключить attr (contenteditable value) для элементов с одинаковыми классами

Question

Я создал кнопку, которая создает элементы, которые имеют одинаковые классы, и в то же время у них есть своя собственная кнопка для переключения атрибута contenteditable, но по какой-то причине кнопка на первом элементе переключает атрибуты, которые могут редактировать содержимое всех элементов. Как мне это исправить?

$(".addroomtest").click(function(){

            $(".roomslist ul").append("<li ><div id='ed' class='editroombutton'>edit</div><div class='editablecont' contenteditable='false' '> Room 301</div></li>"); 
		
	

});



$( ".editroombutton" ).click(function() {
	
    var value = $('.editablecont').attr('contenteditable');

$('.editablecont').attr('contenteditable') === 'true' ? 
$('.editablecont').attr('contenteditable', 'false') : 
$('.editablecont').attr('contenteditable', 'true');
	
});

Answer 1

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