Clicking any checkbox only activates one field?

I'm trying to make a form where each individual checkbox has a number input field attached to it which will only show when the checkbox is checked. So far I've got this:

  <!-- Option1 -->
                      <div class="form-row">
                        <div class="form-group col-md-8">
                          <div class="form-check">
                            <input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
                            <label class="form-check-label" for="c1">
                              Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
                            </label>
                          </div>
                        </div>
                          <div class="form-group col-md-4 " id="ifYes" style="display: none; float:right;">
                            <!-- <label for="qtcounter">Quantity:</label> -->
                            <div class="input-group" id="qtcounter">
                              <input type="button" value="-" class="button-minus" data-field="quantity">
                              <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
                              <input type="button" value="+" class="button-plus" data-field="quantity">
                            </div>
                          </div>
                      </div>
                      <!-- Option 1 ends -->
                      <div class="form-row">
                        <div class="form-group col-md-8">
                          <div class="form-check">
                            <input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Chicken Korma Awadhi" id="c2">
                            <label class="form-check-label" for="c2">
                              Chicken Korma Awadhi<br><i> (Boneless) Serves 2<br>INR 290</i>
                            </label>
                          </div>
                        </div>
                          <div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
                            <!-- <label for="qtcounter">Quantity:</label> -->
                            <div class="input-group" id="qtcounter">
                              <input type="button" value="-" class="button-minus" data-field="quantity">
                              <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
                              <input type="button" value="+" class="button-plus" data-field="quantity">
                            </div>
                          </div>
                      </div>

And here's my JS:

function showqt(){
  if ($('.showman').is(":checked")) {
    document.getElementsByClassName('className')
    document.getElementById('ifYes').style.display = 'inline';
  }
  else {
    document.getElementById('ifYes').style.display = 'none';
  }
}

Now, as long as I have only one checkbox it works fine. However, when I add more checkboxes, regardless of which checkbox I click only the input field for the first checkbox shows up. I want the input field for each individual checkbox to show up depending on whether or not the checkbox is checked.

Is there a global way of doing this or do I need to write custom JS for each checkbox?