checkbox hack inside ngfor

i am using angular 9 and i am doing an checkbox hack that is checked as image, and its work, but my checkbox hack is inside an ngFor and te class is based on the id and its fixed on HTML:

 <ul *ngFor="let acquirer of getAcquirersValues()">
    <li>
       <input type="checkbox" id="myCheckbox1" />
       <label for="myCheckbox1">
       <img src="assets/taxes/brands/.png" /></label>
     </li>
 </ul>

and in my css checkbox:

ul {
    list-style-type: none;
  }

  li {
    display: inline-block;
  }

  input[type="checkbox"][id^="myCheckbox1"] {
    display: none;
  }

  label {
    border: 1px solid #e5e5e5;
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
  }

  label:before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -10px;
    left: -13px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }

  label img {
      width: 64px;
    height: 28px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }

  :checked + label {
    border-color: #ddd;
  }

  :checked + label:before {
    content: "✓";
    background-color: grey;
    transform: scale(1);
  }

  :checked + label img {
    transform: scale(0.9);
    /* box-shadow: 0 0 5px #333; */
    z-index: -1;
  }

That ngFor returns me various items that i render on the image, but, i dont want to create various and various classes to relate it to the id... i think i can do a thing like

<input type="checkbox" id="myCheckBox>

but if i do that i have to create various equal classes on css... anyone know how can i turn it dinamic without write equal classes on css? (because of that, only the first item is checked ever(same id))

thanks