Q:

jQuery child elements with same ID

Imagine that I have this HTML structure:
    <div id="bodyRead">
          ...
            <div id="List"></div>
    </div>

   ...

    <div id="bodyWrite">
          ...
            <div id="List"></div>
    </div>

As you can see, I have the #List inside two different divs (bodyRead and bodyWrite). For a lighter code, I preferred to work with id instead of class (even knowing that duplicate IDs isn't valid, the code makes more sense to me), and selecting the #List on jQuery like this:
$('#bodyRead #List').off('click').on('click', function() ...
$('#bodyWrite #List').off('click').on('click', function() ...

works. I'm always taking care of make duplicate IDs only on child divs, where I can separate them by their parent div on jQuery selector.
Is this approach very wrong? I mean, this can get me in trouble?

A:

don't duplicate your Id even in child element .. change it to class="List"
then you can use
$('.List').on('click',function(){
    var getparent = $(this).parent().attr('id');
    alert(getparent);
});

and if class="List" not first level child of any of #bodyRead or #bodyWrite
add class to it
 <div id="bodyRead" class="mainDiv">
 <div id="bodyWrite" class="mainDiv">

and then use
$('.List').on('click',function(){
    var getclosest = $(this).closest('.mainDiv').attr('id');
    alert(getclosest);
});

