How to split received data from many-to-many model when displaying in html?

Question

css

Good day The
question is, how can I separate the received data when outputting to html, or how can I display them separately?
My models:

class Variety(models.Model):
    varietyName = models.CharField(max_length=30)

    def __str__(self):
        return self.varietyName

class Fruits(models.Model):
    name = models.CharField(max_length=255)
    variety = models.ManyToManyField(Variety)

    def __str__(self):
        return self.name

my view:

def index(request):
    return render(request, 'index.html', {'fruits': Fruits.objects.all().order_by('-id')[:1]})

and my html:

{% for fruit in fruits %}
    <h5>{{ fruit.name }}</h5> // название фрукта
    {% for v in fruit.variety.all %}
        <h5>{{ v.varietyName }}</h5> // название вида
    {% endfor %}
{% endfor %}

At the output, I get 2 values, suppose "bananas" and "coconuts" (if, let's say, 2 varietyName fields were added in the last record, but there may be more)
I get these 2 values ​​using 1 line in html

{{v.varietyName}}

, but I need to place each received value
at its coordinates on the html page. How can I split the received data from many-to-many model?