如何在文本框中添加动态ID？

Question

我正在尝试将id分配给一些在循环中动态创建的文本字段。

循环中的div，由文本字段组成。

<!-- DATA ENTERED IN THIS TEXT BOX WILL BE REFLECTED IN ALL THE TEXT BOXES CREATED IN THE LOOP-->
<div class="col-sm">
                <h5><span class="badge badge-dark">Add Quantity:</span></h5>
           <input class="form-control" type="text" name="add0" id="add0" onkeyup="sync()">

           </div>

<!-- SCRIPT FOR REFLECTING DATA -->

    function sync()
        {
         var add0 = document.getElementById('add0');
         var add1 = document.getElementById('add1');
         var add2 = document.getElementById('add2');
         var add3 = document.getElementById('add3');
         var add4 = document.getElementById('add4');
         var add5 = document.getElementById('add5');
         var add6 = document.getElementById('add6');
         var add7 = document.getElementById('add7');
         var add8 = document.getElementById('add8');
         add8.value = add7.value = add6.value = add5.value = add4.value = add3.value = add2.value =  add1.value = add0.value;
        }


<?php 
<!-- GETS AN ARRAY OF DATA SCANNED IN THE PREVIOUS PAGE -->
$strings = explode(PHP_EOL,($_SESSION['grid']));
$sa = [];
foreach ($strings as $s) {
array_push($sa, "'".$s."'");
}   
$d=implode(',', $sa);

<!-- SQL QUERY -->
$sql = "select distinct size from items where main_group IN(select distinct main_group from items where addl_item_code_barcode IN ($d)) ORDER BY size";
$result = pg_query($db, $sql);
?>
<div class="row">

<!-- THIS LOOP WILL CREATE 8 DIV'S BECAUSE THERE ARE 8 SIZES 36-50 -->
<?php  while($res = pg_fetch_assoc($result)){ ?>

    <div class="col-md-2 show-hide">
    <input type="text" value="<?php echo $res['size']; ?> " readonly 
    style="background-color: #F5F5F5;" class="form-control"/>

    <!-- // OUTPUT WILL BE GENERATED HERE -->
    <div id="addition"></div> 

    <select class="form-control">
       <option>25%</option>
       <option>50%</option>
       <option>100%</option>
    </select><br> 
    </div>
</div>
           <br>
           <br>

               <button type="submit" value="submit" class="btn btn-primary"><i class="fas fa-paint-brush"></i>Apply</button>
 </form>
<?php }?>

<!-- The script that I tried for assigning unique id's -->    
$(document).ready(function() {

  for( var i=1; i<9; i++)  //i<9 because that's the maximum number of 
                           // text fields to be created is 8.     
    {    
         $('#addition')
           .append('<input class="form-control" type="text" name="add" id="add'+i+'" />');
    }

问题是该脚本仅在while循环的第一次迭代中创建一系列文本框。

Here's how it looks.

这里的输出创建了'size'字段下面的所有8个文本框，即'36'。如何获得38以下的第二个文本框和42以下的第3个文本框等等...

有没有办法只动态创建id并将其附加到输入区域，而不是像我一样将输入本身放在循环中？

Answer 1

var text =  "";
for(var i=0;i<11;i++)
{
   text += '<input class="form-control" type="text" name="add" id="add_'+i+'" /></br>';
}
$("#addition").html(text);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addition"></div>

Answer 2

您可以在while循环中设置id，但必须设置唯一ID。也许你应该在id中包含loop-iterator。试试以下示例：

<?php  while($res = pg_fetch_assoc($result)){ ?>
<div class="col-md-2 show-hide">
<input type="text" id="field<?php echo $res['size']; ?>" value="<?php echo $res['size']; ?> " readonly 
style="background-color: #F5F5F5;" class="form-control"/>

<div id="addition"></div> // OUTPUT WILL BE GENERATED HERE

<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select><br> 
</div><?php }?>