how to stay hidden the image if the answer still on the input

So i have this identification, i hide my image if input value is equal to data-letter. but i got a problem where i proceed to the next input.. check my code..

was there any logic that can help me with this? I don't want to use jQuery since i'm practicing JavaScript.. TIA

Here's my code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelectorAll("#choicesIDFExam").forEach((input) => {
    input.addEventListener("keyup", function () {
        var inptValue = this.value;
        document.querySelectorAll("#imglabelIDFExam").forEach((imgLabel) => {
            var attribute = imgLabel.getAttribute('data-letter');
            if (inptValue == attribute)
             { imgLabel.setAttribute('hidden', true) }
             else
             { imgLabel.removeAttribute('hidden'); }
        })
    })
})

<!-- language: lang-html -->

<div class="__wrapContainerExamAR">
  <div class="__imagesContainerIDFExam">
    <div class="__lalagyanImage">
      <label id="imglabelIDFExam" data-letter="a">
        a.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
      <label id="imglabelIDFExam" data-letter="b">
        b.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
      <label id="imglabelIDFExam" data-letter="c">
        c.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
    </div>
  </div>
  <div class="__choicesContainerIDFExam" style="display: flex;flex-direction: column;font-size: 24px;">
    <label>
      <input type="text" id="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      1. <span id="choicesAExamML" class="__choicesMLExam">Use for controlling input and output devices with the use of programmable memory.</span>
    </label>
    <label>
      <input type="text" id="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      2. <span id="choicesAExamML" class="__choicesMLExam">Use for joining two pieces of metal by deforming one or both of them to hold one another.</span>
    </label>
    <label>
      <input type="text" id="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      3. <span id="choicesAExamML" class="__choicesMLExam">It is usually copper or aluminum, and either solid or stranded in construction.</span>
    </label>
  </div>
</div>

<!-- end snippet -->

Element IDs should be unique, so you should use class names to select the elements instead. You can loop through the elements to check their values within the input event.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function getInputValues() {
  const inputValues = [];
  document.querySelectorAll('.choicesIDFExam').forEach(input => {
    inputValues.push(input.value);
  });
  return inputValues;
}

document.querySelectorAll('.choicesIDFExam').forEach(input => {
  input.addEventListener("input", () => {
    document.querySelectorAll('.imglabelIDFExam').forEach(imgLabel => {
      const attribute = imgLabel.getAttribute('data-letter');
      if (getInputValues().includes(attribute)) {
        imgLabel.setAttribute('hidden', true);
      } else {
        imgLabel.removeAttribute('hidden');
      }
    });
  });
});

<!-- language: lang-html -->

<div class="__wrapContainerExamAR">
  <div class="__imagesContainerIDFExam">
    <div class="__lalagyanImage">
      <label class="imglabelIDFExam" data-letter="a">
        a.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
      <label class="imglabelIDFExam" data-letter="b">
        b.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
      <label class="imglabelIDFExam" data-letter="c">
        c.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
    </div>
  </div>
  <div class="__choicesContainerIDFExam" style="display: flex;flex-direction: column;font-size: 24px;">
    <label>
      <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      1. <span class="__choicesMLExam">Use for controlling input and output devices with the use of programmable memory.</span>
    </label>
    <label>
      <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      2. <span class="__choicesMLExam">Use for joining two pieces of metal by deforming one or both of them to hold one another.</span>
    </label>
    <label>
      <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      3. <span class="__choicesMLExam">It is usually copper or aluminum, and either solid or stranded in construction.</span>
    </label>
  </div>
</div>

<!-- end snippet -->