I'm having problems with a CSS/HTML checkbox nested inside ul, li elements

I'm having problems with HTML/CSS checkbox. I have code written to have a checkbox in a set of ul/li elements. The problem is if I click on the text of any of the li elements it crosses off the first ingredient on the list instead of crossing off the li element you clicked on. The checkbox itself works fine besides this hiccup. Any suggestions or ideas on whats going on and how I can fix this?

input[type=checkbox] + label {
  color: black;
  font-style: normal;
}
input[type=checkbox]:checked + label {
  color: #ccc;
  font-style: italic;
}

<ul style="list-style-type: none;">
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">2(6 ounce) filet mignon steaks</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">1 teaspoon olive oil</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Coarse kosher salt and freshly ground black pepper</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">1/2 cup red wine of your choice</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">2 tablespoons of butter</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Oven proof skillet/ Cast-iron skillet</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Oven mitts!</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Thermometer</label>
  </li>
</ul>