There are some ways of doing that, but the best way of doing it, is by delegating one single event to the parent of your children.
var div = document.getElementById("parent");
div.addEventListener("click", function(e) {
var el = e.target;
// here you can get el.id and el.name and do whatever you want
if (el.tagName.toLowerCase() === "select")
alert(el.id);
});
<div id="parent">
<select id="id_1" class="editable-input" name="name_1"></select>
<select id="id_2" class="editable-input" name="name_2"></select>
<select id="id_3" class="editable-input" name="name_3"></select>
</div>
Doing that, you create only one event that could handle all the children you have inside the div. So, you'll use less memory, and even if you create another <select>
dinamically, it would already have the event delegated to it.
Know more about event delegation.
And if you don't like that approach, you can always use the conventional one:
var sels = document.querySelecorAll(".editable-content");
for (var i = 0; i < sels.length; i++) {
sels[i].addEventListener("click", function(e) {
var el = e.target;
// here you can get el.id and el.name and do whatever you want
});
}