Q:

My issues with JavaScript using $.(get) request in Flask App

Hello: I'm a newbie in programming so this problem may turn out to be trivial. 
I have programmed a dice game (called 10,000) to teach myself python. I now want to make a simple web app re-using some of that python code. I'm using a Flask framework (+ Pythonanywhere as my web dev). I was able to put a simple CSS grid together with a CSS stylesheet and inserted a couple of JS buttons and a few HTML objects. I added a Jquery GET request to the button to get some values from the python code. So far, so good. 
When I click the button though, the grid is duplicated (i.e. everything on the page appears twice); and, weirdly, only one of the buttons seems to work and returns the random values. 
Now I'm not sure what I'm doing wrong. I don't see any errors popping up in the developer tool and I see the random numbers appear on the screen. Could you help me find where I messed up? 
my flask app:
import random
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def hello():
    data =  random.randint(1,6)
    if request.method == "GET":
        return render_template('main.html',data=data)

if __name__ == '__main__':
    app.run()

HTML template:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,    shrink-to-    fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" linkhref="/static/css/styles.css">
    </head>
    <body>
        <div class="grid">
            <div class="title"> 
                <h1>10,000</h1>
            </div>
            <div class="dice">
                <div class="card" id="card1">
                    <p>{{ data }}</p>
                </div>
            </div>
            <div class="roll">
                <div class="round-button" id="roll-button">
                    <div class="round-button-circle">
                        <a class="round-button">Save</a>
                    </div>
                </div>
            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <script>
                $(function() {
                    $('#roll-button').click(function() {
                        $.get('/', function(data){
                            var data = data;
                            document.getElementById("card1").innerHTML = data;
                        });
                    });
                });
            </script>

A:

in the app you need add check for ajax, and return json:
from flask import Flask, render_template, request, jsonify
#                            add jsonfy to ipmport ^^^^^^^

def hello():
    data = random.randint(1, 6)
    # add next two line
    if request.is_xhr:
        return jsonify(data=data)
    if request.method == "GET":
        return render_template('main.html', data=data)

in the html use data.data
document.getElementById("card1").innerHTML = data.data
                                       <!--      ^^^^^^ -->

