javascript - 从 mysql 获取数据到 append() 函数以选择输入并将值从该输入检索到其他输入

Question

这是我的桌子

当我选择从材料数据库表中提取的材料时，我需要它的克拉、种类和颜色使用 jquery 或 javascript 自动获取它的值

这是我的 append() 函数，但我不知道如何在 append 函数上获取材料数据

$(function () {
    $("#addMore").click(function (e) {
        e.preventDefault();
        $("#purchase_add").append('My inputs'
    });
});

这是我的html

<div class="col-sm-1">
    <div class="form-group">
      <label for="value"><br /><br /><br /></label>
      <button id="addMore">+</button>
    </div>
</div>
<div class="col-sm-1">
    <div class="form-group" style="text-align: center;">
      <label for="value"> ID</label>
      <input type="text" name="material_id[]" class="form-control"  readonly>
    </div>
</div>
<div class="col-sm-3">
    <?php
          $query_materials = "SELECT * FROM materials";
          $result_materials = mysqli_query($connection, $query_materials);
          if(!$result_materials) {
              die('Query failed');
          }
    ?>
    <div class="form-group" style="text-align: center;">
      <label for="value">Material</label>
      <select name="material[]" class="selectpicker form-control" data-live-search="true">
        <option>Choose Material</option>
          <?php
              while($row = mysqli_fetch_assoc($result_materials)) {
              $id = $row['id'];
              $name = $row['name'];
          ?>
        <option value="<?php echo $name ?>" data-employee="<?php echo $id ?>"><?php echo $name ?> أبيض عيار ٢١ مشغول</option>
          <?php
                }
          ?>
      </select>
    </div>
</div>
<div class="col-sm-1">
    <div class="form-group" style="text-align: center;">
      <label for="value">Carat</label>
      <input name="material_carat[]" type="text" class="form-control" >
    </div>
</div>
<div class="col-sm-1">
    <div class="form-group" style="text-align: center;">
      <label for="value">Kind</label>
      <input name="material_kind[]" type="text" class="form-control" >
    </div>
</div>
    <div class="col-sm-1">
        <div class="form-group" style="text-align: center;">
        <label for="value">Color</label>
        <input name="material_color[]" type="text" class="form-control" >
    </div>
</div>
<div class="col-sm-2">
    <div class="form-group" style="text-align: center;">
      <label for="value">الوزن</label>
      <input name="material_weight[]" onblur="findTotal()" type="text" class="form-control" name="weight[]"/>
    </div>
</div>
<div class="col-sm-2">
    <div class="form-group" style="text-align: center;">
      <label for="value">Carat 21</label>
      <input name="material_carat21[]" type="text" class="form-control" >
    </div>
</div>

感谢您的帮助

标签： javascriptphpjquerymysql