Rendering list of query_set as row on html template

Question

I would like a list of Articles tagged associated with Stories to be rendered on rows exclusive to their Story. Currently the template returns only articles from the last Story on three separate rows. The code as written and understood is:

Many Articles can belong to a single Story. /models.py

class Story(models.Model):
    title = models.CharField(max_length=200, default= "")
    description = models.TextField()
    publication_date = models.DateTimeField()

class Article(models.Model):
    feed = models.ForeignKey(Feed)
    title = models.CharField(max_length=200)
    url = models.URLField()
    publication_date = models.DateTimeField()
    story = models.ManyToManyField(Story, default=None, blank=True)

Using queries, get a list of all story_ids. If entry in story_id_lst is equal to story_id in articles then append that story to row list.

/views.py

def articles_list(request):
    articles = Article.objects.all()
    story_id_lst = articles.values_list('story').distinct()
    for entry in story_id_lst:
      rows = articles.filter(story=entry)

Running that code in the shell returns three list, one empty, one with all articles matched to story 1 and one with all articles matched to story 2. I believe the problem is somewhere in the following code.

/views.py

return render(request, 'news/articles_list.html', {'rows': rows})

/articles_list.html

<div class="container" style="background-color: #DCDCDC; border-radius: 25px;">
<div class="row">
{% for row in rows %}
<div class="col-md-12">
    {% for entry in row %}
    <div class="container-fuild">
        <div class="col-md-4" >
            <h2>{{entry.title}}</h2>
            <div>
                <p><a href="{{entry.url}}" target="_blank" class="btn btn-primary">View Details</a></p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endfor %}
</div>
</div>

Answer 1

I see you've made extensive changes to your question..

If an Article can belong to a single Story, then Article should have a foreign key to Story (not a many-to-many relation):

class Story(models.Model):
    title = models.CharField(max_length=200, default= "")

class Article(models.Model):
    story = models.ForeignKey(Story, default=None, blank=True)
    title = models.CharField(max_length=200)
    url = models.URLField()

then the view can be written as:

def articles_list(request):
    articles = Article.objects.all()
    return render(request, 'news/articles_list.html', {'articles': articles})

and the template:

{% regroup articles by story as story_list %}

<ul>
{% for story in story_list %}
    <li>{{ story.grouper }}
    <ul>
        {% for article in story.list %}
            <li><a href="{{ article.url }}">{{ article.title }}</a></li>
        {% endfor %}
    </ul>
    </li>
{% endfor %}
</ul>