根据PHP Foreach循环中的select显示更多输入

Question

I have a PHP Foreach loop that contains a "Quantity" input. Users can select a quantity and then that quantity selected should display the selected # of new inputs. If I choose a quantity of "3" then 3 new inputs should appear for that item. Remember, I have a forreach loop so I have multiple items.

As of right now, my code only works to display the new number of inputs for the FIRST item only. I need it to work for every item in the forreach loop. See my code below:

foreach($rows as $row) {
                 $appareltype = $row['appareltype'];
                    $apparel = explode(",", $appareltype);
                    foreach($apparel as $datapparel) {
                        ?>
                            <b><? echo $datapparel ?></b><br>
                            Quantity: <select name="quantity[]" class="form-control quantity">
                            <option value="0" selected="selected">0</option>
                            <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>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>

                            <div id="text">

                            </div>

                        <?
                    }

            }
                     ?>

jQuery:

<script type="text/javascript">
$("select.quantity").change(function () {
  var str = "";
  var count = Number($("select option:selected").val())
  for (var i = 0; i < count; i++) {
      str += '<div class="oneinput"> <label>' + i
              + "</label> <input name='" + i + "' class='form-control'>"
              + "</div>";
  }

  $("#text").html(str);
});
</script>

Answer 1

There are multiple issues here. First, in your jQuery, use

$(this).find("option:selected").val()

instead of

$("select option:selected").val()

Second, you're creating multiple div elements with the same ID ('text'). You can only have an ID once in the DOM. Get rid of the ID on that element. Maybe replace it with some identifiable class if you want.

So how to inject the new content into the divs now? Use $(this).next().html(str);

Finally, close your select element before the div.

…
    <option value="20">20</option>
</select>
<div class="something"></div>