jquery targeting individual generated list tags

Question

I am creating a grocery list where items can be added, deleted, and crossed off. My problem right now involves crossing items off and being able to undo it. Clicking on the item (the text), will cross it off and double clicking the item will uncross it.Unfortunately, every "li" tag(with class="food") generated when an item is added to the list will be crossed off when clicked.

      $(".food").on({
            click: function(){
              $(this).parent().css("text-decoration","line-through"); 
            },
            dblclick: function(){
              $(this).parent().css("text-decoration", "none"); 
            }
        });

I understand why every item is being targeted. My issue is either finding a way to generate a unique id when every "li" tag is generated, and then code a way to target them individually or some other solution. I'd like some help figuring this out! Links appreciated.

Answer 1

Remove .parent() and you are done

$(".food").on({
  click: function() {
    $(this).css("text-decoration", "line-through");
  },
  dblclick: function() {
    $(this).css("text-decoration", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="food">apple</li>
  <li class="food">mango</li>
  <li class="food">orange</li>
  <li class="food">banana</li>
  <li class="food">black current</li>
</ul>