jquery выберите для увеличения идентификатора

Question

У меня есть ряд элементов, которые отображаются на основе данных о моих датах. и генерирует идентификаторы деления приращения на

$(document).ready(function() {
                $('#MainD1').on('click', function () {
                    $('#ShowD1').toggle();
                });
            $('#MainD2').on('click', function () {
                $('#ShowD2').toggle();
            });
            $('#MainD3').on('click', function () {
                $('#ShowD3').toggle();
            });
            $('#MainD4').on('click', function () {
                $('#ShowD4').toggle();
            });
            ....
            $('#MainDn').on('click', function () {
                $('#ShowDn').toggle();
            });
        });

Я хотел бы заменить это чем-то вроде «каждой» функции, которая генерирует для каждого идентификатора, я использовал для l oop, но коды не работали внутри l oop.

Мои PHP коды:

@foreach ( $reled as $rele )
                <div style="display: none;">{{$ix++}}</div>
                <div id="MainD{{$ix}}">
                    <div class="released-item" id="myDIV">
                        <div><b>{{ $rele->customer_name }}</b></div>
                    </div>
                </div>
                <div style="display: none;" id="ShowD{{$ix}}">
                    <div class="field-item">
                        <div>{{ $rele->customer_name }}</div>
                        <span class="text-muted text-xs">Full Name</span>
                    </div>
                    <div class="field-item">
                        <div>{{ $rele->amount_word }}</div>
                        <span class="text-muted text-xs">Amount in Words</span>
                    </div>
                    <div class="field-item">
                        <div>{{ $rele->amount_numb }}</div>
                        <span class="text-muted text-xs">Amount in Numbers</span>
                    </div>
                    <div class="field-item">
                        <div>{{ $rele->customer_address }}</div>
                        <span class="text-muted text-xs">Customer Address</span>
                    </div>
                    <div class="field-item">
                        <div>{{ $rele->date_accident }}</div>
                        <span class="text-muted text-xs">Date of Accident</span>
                    </div>
                </div>
                @endforeach

Answer 1

Дайте им всем класс и используйте навигацию DOM, чтобы найти связанные элементы.

PHP:

@foreach ( $reled as $rele )
    <div style="display: none;">{{$ix++}}</div>
    <div id="MainD{{$ix}}" class="MainD">
        <div class="released-item" id="myDIV">
            <div><b>{{ $rele->customer_name }}</b></div>
        </div>
    </div>
    <div style="display: none;" id="ShowD{{$ix}}" class="ShowD">
        <div class="field-item">
            <div>{{ $rele->customer_name }}</div>
            <span class="text-muted text-xs">Full Name</span>
        </div>
        <div class="field-item">
            <div>{{ $rele->amount_word }}</div>
            <span class="text-muted text-xs">Amount in Words</span>
        </div>
        <div class="field-item">
            <div>{{ $rele->amount_numb }}</div>
            <span class="text-muted text-xs">Amount in Numbers</span>
        </div>
        <div class="field-item">
            <div>{{ $rele->customer_address }}</div>
            <span class="text-muted text-xs">Customer Address</span>
        </div>
        <div class="field-item">
            <div>{{ $rele->date_accident }}</div>
            <span class="text-muted text-xs">Date of Accident</span>
        </div>
    </div>
@endforeach

jQuery:

$(document).ready(function() {
  $(".MainD").click(function() {
    $(this).next(".ShowD").toggle();
  });
});