How to find out what DIV was clicked in a collection

Question

I've got a collection of selectable divs on my page

$(function() {
   $('#selectable-divs div').click(function(){
   var x = $('#selected-divs div').attr('id');
   alert(x);
   });
});


<div id="selectable-divs">
    <div id="id-pc1">Item 1</div>
    <div id="id-pc2">Item 2</div>
    <div id="id-pc3">Item 3</div>
    <div id="id-pc4">Item 4</div>
    <div id="id-pc5">Item 5</div>
    <div id="id-pc6">Item 6</div>
</div>

I'm looking for correct jQuery that would capture the ID value of whats been selected/clicked in the "selectable-divs" collections. The selectable part of the jquery works fine, however, when I click the div, it returns a value of "undefined" in the alert box

Answer 1

You can use jQuery and Javascript pure

$(function() {
    $('#selectable-divs div').click(function(){
        var x = this.id;
        alert(x);
    });
});

ES6 the last versiion of javascript

$(function() {
    $('#selectable-divs div').on('click', function(){
        let x = this.id
        alert(x)
    });
});