Jquery 带有两个选择框的laravel html动态表单，其中选择二取决于选择一

我需要一个HTML动态表单，我可以添加多个表字段和两个选择框。但是，选择框2取决于选择框1。我为第一行编写了JQuery代码，但对第二行（新添加的）根本不起作用

添加新行的My jquery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                <script type="text/javascript">

                $(document).ready(function(){
                var i = 0;
                console.log(i);
                $("#add").click(function(){
                i++;
                console.log(i);
                $('#inv_table').append('<tr id="row'+i+'"><td><select class="form-control custom-select" id="product'+i+'" name="product_id"><option>Select Product</option>              @foreach($products as $product)<option value="{{$product->id}}">{{$product->product_name}}</option>@endforeach                   </select></td><td><input type="text" name="price[]" value=""/></td><td><select class="form-control custom-select" id="gst'+i+'" name="gst[]"><option value=""></option>      </select></td><td><input id="'+i+'" type="submit" name="remove" value="Remove" class="btn btn-danger btn-sm btn_remove" ></td></tr>')
                });
                $(document).on('click','.btn_remove',function(){
                var button_id = $(this).attr("id");
                console.log(button_id);
                $('#row'+button_id+'').remove();
                })
                });
                </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                <script type="text/javascript">
                $(document).ready(function(){
                    $('#product').on('change', function(e){
                        console.log(e);
                        var id = e.target.value;
                        console.log(id);
                        $.get('ajax-unit/'+id, function(data){
                            console.log(data.tax);
                            $('#gst').empty();
                            $('#gst').append('<option value="data.tax">'+data.tax+'</option>');
                        });
                    });

                });

                </script>

$（文档）.ready（函数（）{
var i=0；
控制台日志（i）；
$（“#添加”）。单击（函数（）{
i++；
控制台日志（i）；
$（'inv_table'）.append（'Select Product@foreach（$products as$Product）{{{{$Product->Product_name}}@endforeach'））
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
控制台日志（按钮id）；
$（“#行”+按钮id+”）.remove（）；
})
});

动态选择框的我的jquery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                <script type="text/javascript">

                $(document).ready(function(){
                var i = 0;
                console.log(i);
                $("#add").click(function(){
                i++;
                console.log(i);
                $('#inv_table').append('<tr id="row'+i+'"><td><select class="form-control custom-select" id="product'+i+'" name="product_id"><option>Select Product</option>              @foreach($products as $product)<option value="{{$product->id}}">{{$product->product_name}}</option>@endforeach                   </select></td><td><input type="text" name="price[]" value=""/></td><td><select class="form-control custom-select" id="gst'+i+'" name="gst[]"><option value=""></option>      </select></td><td><input id="'+i+'" type="submit" name="remove" value="Remove" class="btn btn-danger btn-sm btn_remove" ></td></tr>')
                });
                $(document).on('click','.btn_remove',function(){
                var button_id = $(this).attr("id");
                console.log(button_id);
                $('#row'+button_id+'').remove();
                })
                });
                </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                <script type="text/javascript">
                $(document).ready(function(){
                    $('#product').on('change', function(e){
                        console.log(e);
                        var id = e.target.value;
                        console.log(id);
                        $.get('ajax-unit/'+id, function(data){
                            console.log(data.tax);
                            $('#gst').empty();
                            $('#gst').append('<option value="data.tax">'+data.tax+'</option>');
                        });
                    });

                });

                </script>

$（文档）.ready（函数（）{
$（“#产品”）。关于（'change'，函数（e）{
控制台日志（e）；
var id=e.target.value；
console.log（id）；
$.get（'ajax-unit/'+id，函数（数据）{
console.log（data.tax）；
$（'#gst'）.empty（）；
$（'#gst'）。追加（''+数据.税+''）；
});
});
});

请帮帮我

---

提前感谢。

发布您的HTML或刀片视图文件欢迎使用Stackoverflow。最好尽可能多地包含信息。在这个故事中，您可以通过提供代码片段的链接，并详细描述您看到的内容、期望的内容以及可能尝试过的内容，从而真正帮助那些试图提供帮助的人。