jquery toggleClass selects all list items instead of one

jquery toggleClass selects all list items instead of one

I'm new to jQuery and I've searched for similar issues on Stack, but
haven't found this specific (and I'm sure common) issue.
I have a list of items that have a default class. I want to use
toggleClass to add a rollover effect. The problem is that all of the lis
are getting the toggled class instead of just the one that is being
hovered.
<ul>
<li class="my-class"><div id="my-item>1</div></li>
<li class="my-class"><div id="my-item>2</div></li>
<li class="my-class"><div id="my-item>3/div></li>
</ul>
$('.my-class, li').on('mouseenter', function() {
$('#my-item').toggleClass('project-home-title-hover');
});