Codeigniter Ajax Dependent Dropdown doesn't work inside foreach statement

Question

I made 2 dependent dropdown in the same page. One of them is inside foreach statement and it doesn't work at all. Meanwhile the other one works well. The name of id are totally different. Both of dependent dropdown lists refer to the same function in controller. I thought its the main problem and tried to make a different function, but it didn't change anything.

VIEW :

<tr>
    <td><label>Category</label></td>
    <td>
        <div class="form-group">
            <select id="edit_category" class="form-control" name="edit_category">
                  <option value="">Select Category</option>
                        <?php foreach ($categories as $cat) : ?>
                            <option <?php ?> value="<?php echo $cat->id; ?>"><?php echo $cat->name 
                            </option>
                        <?php endforeach; ?>
            </select>
        </div>
    </td>
</tr>
<tr>
    <td><label>Product</label></td>
    <td>
        <div class="form-group">
            <select name="edit_product" id="edit_product" class="form-control" style="width:350px">
                    <option value="">Select Product</option>
            </select>
        </div>
    </td>
</tr>

SCRIPT :

<script type="text/javascript">
    $(document).ready(function() {

        //DEPENDENT DROPDOWN - ADD ITEM :
        $('#add_category').on('change', function() {
            $('#add_product').html('<option value="">Select Product</option>');
            var catID = $(this).val();
            $.ajax({
                url: "<?php echo site_url('admin/item/dependentDL') ?>",
                method: "POST",
                data: {
                    id_p_category: catID
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    $('#add_product').html(data);
                },
                error: function(error) {
                    alert(error);
                }
            });
            return false;
        }); //END - DROPDOWN - ADD ITEM


        //DEPENDENT DROPDOWN - EDIT ITEM :
        $('#edit_category').on('change', function() {
            $('#edit_product').html('<option value="">Select Product</option>');
            var edit_catID = $(this).val();
            $.ajax({
                url: "<?php echo site_url('admin/item/dependentDL') ?>",
                method: "POST",
                data: {
                    id_p_category: edit_catID
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    $('#edit_product').html(data);
                },
                error: function(error) {
                    alert(error);
                }
            });
            return false;
        });
    });
</script>

Answer 1

You should try with class instead of id because id is unique and your dropdown in the foreach loop so please try with class like below

  $('.add_category').on('change', function() {
        $('#add_product').html('<option value="">Select Product</option>');
        var catID = $(this).val();
        $.ajax({
            url: "<?php echo site_url('admin/item/dependentDL') ?>",
            method: "POST",
            data: {
                id_p_category: catID
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#add_product').html(data);
            },
            error: function(error) {
                alert(error);
            }
        });
        return false;
    }); //END - DROPDOWN - ADD ITEM


    //DEPENDENT DROPDOWN - EDIT ITEM :
    $('.edit_category').on('change', function() {
        $('#edit_product').html('<option value="">Select Product</option>');
        var edit_catID = $(this).val();
        $.ajax({
            url: "<?php echo site_url('admin/item/dependentDL') ?>",
            method: "POST",
            data: {
                id_p_category: edit_catID
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#edit_product').html(data);
            },
            error: function(error) {
                alert(error);
            }
        });
        return false;
    });