Javascript 动态添加更多字段包括2个动态下拉列表（类别下拉列表和产品下拉列表）和一个输入框，用于输入价格

我想动态填充两个下拉列表，这两个下拉列表是从数据库和一个输入框中获取的 第一个下拉列表：填充类别 第二个下拉列表：根据类别，在产品下拉列表中填充所有产品 输入框：输入价格

这三个字段是通过jQuery添加更多动态添加的

类别：
-------挑选--------
stackoverflow上有这么多答案，首先在Google上搜索它，问题是什么？根据类别，我在产品下拉列表中获得相关值。但是我怎样才能通过点击AddMore链接来添加这3个字段，而这些下拉列表中有我在另一个下拉列表中显示数据的ID。如果我添加新字段，那么我如何更改这些字段请澄清，您的问题到底是什么，代码在哪里，您面临的问题/问题是什么？这很好，但现在我想创建“添加更多”链接，在一个表单中添加更多下拉列表div
<script type="text/javascript" src="js/jquery.min.js"></script>

<div class="">
    Category :
    <select name="category" id="category">
        <option value=''>------- Select --------</option>
        <?php 
        $sql = "select * from `categories`";
        $res = mysqli_query($con, $sql);
        if(mysqli_num_rows($res) > 0) {
            while($row = mysqli_fetch_object($res)) {
                echo "<option value='".$row->cat_id."'>".$row->cat_name."</option>";
            }
        }
        ?>
    </select>

    Products :
    <select name="products" id="products"><option>------- Select --------</option></select>
</div>


<script>$(document).ready(function() {
$("#category").change(function() {
    var product_id = $(this).val();
    if(product_id != "") {
        $.ajax({
            url:"get-products.php",
            data:{c_id:product_id},
            type:'POST',
            success:function(response) {
                var resp = $.trim(response);
                $("#products").html(resp);
            }
        });
    } else {
        $("#products").html("<option value=''>------- Select --------</option>");
    }
}); }); </script>