Bootstrap коллапс на переднем плане l oop и ajax

Question

Я использую Bootstrap Свернуть в Foreach l oop. Здесь я хочу показать данные, которые поставляются с ajax при нажатии кнопки во всплывающей области свертывания.

@foreach($depo_verileri as $veri)
        <div class="col-md-4">
            <div class="depo_veri_item" style="width:90%;">
                <span class="depo_kod">
                <a class="depo_sec" style="color:white;" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                        <i class="material-icons">
                        keyboard_arrow_right
                    </i>
                    {{ $veri['kod'] }}
                    <input id="{{$veri['id']}}" type="hidden" name="depo_id" value="{{$veri['id']}}">
                </a>

                </span>
            </div>
        </div>
        @endforeach

Когда я смотрю на консоль, в зависимости от того, что я нажимаю, входящие данные всегда 1.

<script type="text/javascript">
    $(document).ready(function(){
        $('.depo_sec').click(function(){
            var depo_id = $('input[name="depo_id"]').val();

            console.log(depo_id);

            return false;
        });
    });
</script>

Я не мог найти точно, где я делаю ошибку. Заранее благодарю за совет.

Answer 1

Да, это выглядит как нормальное поведение

Причина, почему?

Вы создаете несколько скрытых входов с точно таким же селектором name attr

Способ исправить

$('.depo_sec').click(function(){

      var depo_id = $(this).children('input:hidden').eq(0).val();

      console.log(depo_id);

      return false;
});

Работа Демо

Answer 2

Я согласен с @Foued MOUSSI.

Вы создаете несколько скрытых входов с точно таким же атрибутом селектора name.

Вместо этого вам следует рассмотреть возможность замены name="depo_id" на name="depo_id[]" И внесите соответствующие изменения в ваш внешний и внутренний коды.

Надеюсь, это поможет.