How to display 2 message in my django website

I am creating a website that can display the hours worked of an employee and also show a graph of the employee's past working hours. The graph on the y-axis could not show time value so I made an input that can convert integer to time. I want it to be displayed at the bottom while still showing the graph and hours worked. Here is a picture of my website displaying the hours worked, the graph, and the converted input:

enter image description here

Here is after I convert integer to time:

enter image description here

Here is my code:

def report(response):
    empName = employeeName.objects.all
    correct = True
    global cInUpdated
    global allDateUpdated
    global label
    if response.method == "POST":
        if 'byHour' in response.POST:
            n = response.POST.get("enterName")
            if employeeName.objects.filter(employee=n).exists():
                emp = employeeName.objects.get(employee=n)
                time = emp.total_Hours_Worked
                messages.info(response, time + ' hours')
                f = Name.objects.filter(name=emp)
                allDate = []
                cIn = []
                today = datetime.today()
                datem = today.month
                for date in f:
                    allDate.append(date.date)
                    totalTime = (datetime.combine(date.date, date.timeOut)- datetime.combine(date.date, date.timeIn)).seconds/3600
                    cIn.append(totalTime)
                    hours = int(totalTime)
                    minutes = (totalTime*60) % 60
                    seconds = (totalTime*3600) % 60
                    time = "%d:%02d:%02d" % (hours, minutes, seconds) 
                
                cInUpdated = []
                allDateUpdated = []
                label = "Hours worked this month"
                for item in range(len(allDate)):
                    if allDate[item].month == datem:
                        cInUpdated.append(cIn[item])
                        allDateUpdated.append(allDate[item])
                    else:
                        continue
                return render(response, "main/report.html", context={"empName":empName, "correct":correct})
            else:
                correct = False
                messages.error(response, 'Name does not exist')
            
        elif 'specificDate' in response.POST:
                    n = response.POST.get("enterName")
                    firstDate = response.POST.get("firstDate")
                    secondDate = response.POST.get("secondDate")
                    correctDate = None
                    try:
                        newDate = datetime.strptime(firstDate,  '%Y-%m-%d')
                        newDate2 = datetime.strptime(secondDate,  '%Y-%m-%d')
                        correctDate = True
                    except ValueError:
                        correctDate = False
                    if employeeName.objects.filter(employee=n).exists() and correctDate == True:
                        if firstDate <= secondDate:
                            emp = employeeName.objects.get(employee=n)
                            f = Name.objects.filter(name=emp, date__range=[firstDate, secondDate])
                            
                            allDateUpdated = []
                            cInUpdated = []
                            label = "Hours worked from " + firstDate + " to " + secondDate
                            for item in f:
                                allDateUpdated.append(item.date)
                                totalTime = (datetime.combine(item.date, item.timeOut)- datetime.combine(item.date, item.timeIn)).seconds/3600
                                cInUpdated.append(totalTime)
                            time = findTotalTime(f)
                            messages.info(response, time + ' hours')
                            return render(response, "main/report.html", context={"empName":empName, "correct":correct})
                        else:
                            messages.error(response, 'Please enter the correct input')
                    else:
                        correct = False
                        messages.error(response, 'Please enter the correct input')

        elif 'byDate' in response.POST:
            dictionary = {}
            check = False
            n = response.POST.get("enterName")
            specDate = response.POST.get("date1")
            correctDate = None
            ot = None
            if employeeName.objects.filter(employee=n).exists():
                emp = employeeName.objects.get(employee=n)
                try:
                    newDate = datetime.strptime(specDate,  '%Y-%m-%d')
                    correctDate = True
                except ValueError:
                    correctDate = False
                if correctDate == True:
                    if Name.objects.filter(name=emp, date=specDate).exists():
                        check = True
                        t = Name.objects.get(name=emp, date=specDate)
                        if Name.objects.filter(name=emp, overtime=True).exists():
                            ot = True
                            overT = Name.objects.filter(name=emp, overtime=True)
                            for item in overT:
                                totalTime = (datetime.combine(item.date, item.timeOut)- datetime.combine(item.date, item.timeIn)).seconds/3600
                                hours = int(totalTime)
                                minutes = (totalTime*60) % 60
                                seconds = (totalTime*3600) % 60
                                time = "%d:%02d:%02d" % (hours, minutes, seconds) 
                                dictionary[time] = item.date
                            checkIn = t.timeIn.strftime("%H:%M:%S")
                            checkOut = t.timeOut.strftime("%H:%M:%S")
                            messages.info(response, checkIn + ' - ' + checkOut)
                            return render(response, "main/report.html",  context={"empName":empName,  "check":check, "dictionary":dictionary, "emp":emp, "ot":ot})
                        else:
                            ot = False
                            checkIn = t.timeIn.strftime("%H:%M:%S")
                            checkOut = t.timeOut.strftime("%H:%M:%S")
                            messages.info(response, checkIn + ' - ' + checkOut)
                            return render(response, "main/report.html",  context={"empName":empName,  "check":check, "emp":emp, "ot":ot})
                    else:
                        messages.error(response, 'Result does not exist')
                else:
                    messages.error(response, 'Please enter the correct input')
            else:
                messages.error(response, 'Please enter the correct input')
        elif 'convertNum' in response.POST:
            n = response.POST.get("convert")
            try: 
                newN = float(n)
                hours = int(newN)
                minutes = (newN*60) % 60
                seconds = (newN*3600) % 60
                time = "%d:%02d:%02d" % (hours, minutes, seconds)      
                messages.info(response, time + ' hours')
            except ValueError:
                messages.error(response, 'Please enter a value')
    return render(response, "main/report.html", {"empName":empName})

Here is my html code:

{% extends 'main/base.html' %}

{% block title %}Report{% endblock %}

{% block content %}
<script>
    function myFunction() {
      var x = document.getElementById("date");
      if (x.style.display == "none") {
        x.style.display = "block";
      }
      else{
        x.style.display = "none"
      }
    }

    function myFunction2() {
      var x = document.getElementById("date2");
      if (x.style.display == "none") {
        x.style.display = "block";
      }
      else{
        x.style.display = "none"
      }
    }
</script>

<h1 class="p1">Report</h1>
<hr>
<form method="POST" >
    {% csrf_token %}
    <center>
        <input list="name" name="enterName"  placeholder="enter name..." style="margin-bottom: 10px;">
        <datalist id="name">
            {% for empName in empName %}
                <option value="{{empName.employee}}">
            {% endfor %}
        </datalist>
        <div id="date" style="display: none;">
            <input type="date" name="firstDate" value="firstDate">
            <input type="date" name="secondDate" value="secondDate">
            <button type="submit" name="specificDate" value="specificDate" class="button2" style="width: fit-content; font-size: 12px;">Filter</button>
        </div>
        <div id="date2" style="display: none; margin-left: 20px; margin-top: 5px;">
            <input type="date" name="date1" value="date1" >
            <button type="submit" name="byDate" value="byDate" class="button2" style="width: fit-content; font-size: 12px;">Filter</button>
        </div>
        <div id="totalHours" style="display: none; margin-left: -10px; margin-top: 5px;">
            <button type="submit" name="byHour" value="byHour" class="button2" style="width: fit-content; font-size: 12px;">Total Hours</button>
        </div>
        <p class="p2" style=" font-size: 17px;">Filter by: </p>
        <div class = "pad3">
            <button type="submit" name="byHour" value="byHour" class="button1" id="example2" style="width: fit-content; margin-right: 50px; font-size: 12px;">Total Hours</button>
            <button type="button" name="byDate" value="byDate" class="button1" id="example2" onclick="myFunction2   ()" style="width: fit-content; margin-right: 50px; font-size: 12px;">Date</button>
            <button type="button" name="specificDate" value="specificDate" class="button1" id="example2" onclick="myFunction()" style="width: fit-content; font-size: 12px;">Date Range</button>
        </div>
    </center>
</form>


{% for message in messages %}
<div class = "pad2">
<div class="container-fluid p-0">
  <div class="alert {{ message.tags }} alert-info" role="alert" >
     {{ message }} 
    </div>
  </div>
</div>
{% if check == True %}
<p style="font-size: 18px;"><strong>Dates where {{emp}} worked overtime</strong>:</p>
{% if ot == True%}
<ul>
{% for key, value in dictionary.items %}
  <li style="padding-top: 5px;">{{ value }} - {{ key }} hours</li>
{% endfor %}
</ul>
{% else%}
<ul>
    <li>None</li>
</ul>
{% endif %}
{% endif %}
{% if correct  == True%}
<body class="container-fluid">
  <hr/>
  <div class="charts">
  <div class="row">
    <div class="col-md-6" style="width: 80%; margin-left: 20px;">
      <canvas id="myChartBar"></canvas>
    </div>
  </div>
<form method="POST">
  {% csrf_token %}
  <div style="float: right;">
    <input style="margin-left: 20px;" name="convert" placeholder="convert number to time...">
    <button type="submit" name="convertNum" value="convertNum" class="button2" id="example2">Convert</button>
  </div>
</form>
<script>
    var endpoint = '/api';
  
    $.ajax({
      method: "GET",
      url: endpoint,
      success: function(data) {
        //drawLineGraph(data, 'myChartline');
        drawBarGraph(data, 'myChartBar');
        console.log("drawing");
      },
      error: function(error_data) {
        console.log(error_data);
      }
    })
  
  
    function drawBarGraph(data, id) {
      var labels = data.labels;
      var chartLabel = data.chartLabel;
      var chartdata = data.chartdata;
      var ctx = document.getElementById(id).getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: chartLabel,
            data: chartdata,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Hours'
              }
            }]
          }
        }
      });
    }
  </script>
</body>
</div>
{% endfor %}
{% endblock %}