将选择更改为在购物车中输入

我正在尝试根据值 10 将选择列表更改为文本输入(例如亚马逊购物车(。我所拥有的适用于 1 行，但我想添加多行。我需要一些帮助将 jquery 更改为一次只更改 1 行。

$(function() {
  $('.dropdown-change').on('change', function() {
    var dropdownValue = $(this).val();
    if (dropdownValue == 10) {
      $('.dropdown-control').hide();
      $('.input-control').show();
    } else {
      $('.dropdown-control').show();
      $('.input-control').hide();
    }
    return false;
  });
});

.input-control {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row dropdown-row">
  <div class="col-xs-2 col sm-2 col-md-2">
    <label for="quantity">Qty</label>
  </div>
  <div class="col-xs-8 col-sm-8 col-md-8">
    <div class="dropdown-control">
      <div class="col-xs-12 col-sm-12 col-md-6 no-pad-left">
        <select name="quantity" class="form-control dropdown-change">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10+</option>
        </select>
      </div>
    </div>
    <div class="input-control">
      <div class="col-md-6 no-pad-left">
        <input type="text" value="10" size="10" name="quantity" id="quantity" class="form-control" />
      </div>
      <div class="col-md-6 no-pad-left">
        <button class="btn btn-primary btn-xs">update</button>
      </div>
    </div>
  </div>
</div>