JS change image of many HTML elements and line-through their text

i think is a pretty simple JS script but for some reason i can't get my head around my problem. All i am trying to do is: i have a list of items and before them i have an image, an empty checkbox in my case. Now, if i click on that empty box, then another image replaces the old one (a ticked box) and the item is crossed over (line-through). If the item is already crossed over and having the ticked image, and click back on the image again, i want it to set both image and text decoration into their initial condition as before. So far what i 've done:

    <img id="tick_" onclick="myFunction()" src="image1.jpg" align="middle" /><strong id="cross">Item A</strong>
<img id="tick_" onclick="myFunction()" src="image1.jpg" align="middle" /><strong id="cross">Item B</strong>
<img id="tick_" onclick="myFunction()" src="image1.jpg" align="middle" /><strong id="cross">Item C</strong>

<script>
function myFunction() {
    if(document.getElementById("tick_").src == "image1.jpg"){
    document.getElementById("tick_").src = "image2.jpg";
    document.getElementById("cross").style.textDecoration = "line-through";
    }
       else {
    document.getElementById("tick_").src = "image1.jpg";
    document.getElementById("cross").style.textDecoration = "none";
    }
}
</script>

Results: it worked for the first item but not for the rest. Would a For case solve my problem? Could i use some help? Thank you in advance.