Мои объекты дублируют друг друга в шаблоне django

Я пытаюсь сделать свое веб-приложение на Django и не могу преодолеть проблему. Мне нужно разделить объекты модели на два div для правильного отображения, но мои объекты посуды просто дублируют друг друга. Я пытался найти информацию о том, как разделить объекты посуды на две части и передать их в html код, но ничего не получилось. Также может быть решение на основе шаблонов python, но я не знаю, как его решить, потому что чистый html код проекта - это то, что я никогда не видел раньше (есть классы left-list и right-list для колонок посуды, поэтому нам нужно как-то разделить наши дикты посуды). Есть 2 цикла for из-за того, что первый тег row создает два col-lg-6 слева и справа (это видно на последнем изображении кода страницы шаблона по умолчанию), возможно это плохая идея.

views.py:

from django.shortcuts import render, redirect, HttpResponse
from django.urls import reverse
from .forms import ReserveForm
from .models import ChefsModel, DishesModel

# Create your views here.

def reserve(request):
    chefs = ChefsModel.objects.all()
    dishes = DishesModel.objects.all()
    error = ''
    if request.method == 'POST':
        form = ReserveForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index')
        else:
            error = 'Invalid form'
    else:
        form = ReserveForm()

    return render(request, 'main/index.html', {'form':form, 'error':error,
                'chefs':chefs, 'dishes':dishes, 'n':[1,2]})

# Create your views here.
def index(request):
    return reserve(request)

Мой шаблон Django + HTML:

<article id='tabs-1'>
        <div class="row">
            {% for i in n %}
                <div class="col-lg-6">
                    <div class="row">
                        <div class="{% cycle 'left' 'right' %}-list">
                            {% for dish in dishes %}
                                {% if dish.tabs == 'Breakfast' %}
                                    <div class="col-lg-12">
                                        <div class="tab-item">
                                            <img src="{{ dish.image.url }}" alt="">
                                            <h4>{{ dish.name }}</h4>
                                            <p>{{ dish.description }}</p>
                                            <div class="price">
                                                <h6>${{ dish.price }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </article> 

Как это работает в чистом HTML:

<div class="col-lg-12">
    <section class='tabs-content'>
        <article id='tabs-1'>
            <div class="row">
                <div class="col-lg-6">
                    <div class="row">
                        <div class="left-list">
                            <div class="col-lg-12">
                                <div class="tab-item">
                                    <img src="assets/images/tab-item-01.png" alt="">
                                    <h4>Fresh Chicken Salad</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur koit adipiscing elit, sed do.</p>
                                    <div class="price">
                                        <h6>$10.50</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="tab-item">
                                    <img src="assets/images/tab-item-02.png" alt="">
                                    <h4>Orange Juice</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur koit adipiscing elit, sed do.</p>
                                    <div class="price">
                                        <h6>$8.50</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="tab-item">
                                    <img src="assets/images/tab-item-03.png" alt="">
                                    <h4>Fruit Salad</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur koit adipiscing elit, sed do.</p>
                                    <div class="price">
                                        <h6>$9.90</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Результат моего HTML

Как это должно быть (в чистом HTML)1

Как это должно быть (в чистом HTML)2

Вернуться на верх