Incorporate json elements in multiple JQuery buttons with a search bar

I have just starting using JQuery and I have a problem :

I have a json variable like this :

dict_elt = {
  "Elt1": {
    "key3":"elt1_3",
    "key4":"elt1_4",
    "key5":"elt1_5"
  },
  "Elt2": {
    "key3":"elt2_3",
    "key4":"elt2_4",
    "key5":"elt2_5"
  },
  "Elt3": {
    "key1":"elt3_1",
    "key2":"elt3_2",
    "key3":"elt3_3",
    "key4":"elt3_4"
  },
  "Elt4": {
    "key2":"elt4_2",
    "key3":"elt4_3"
  }
}

This parameter comes from a Flask app :

import os
from flask import Flask, render_template
import json

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'upload_folder'

with open(os.path.join(app.config['UPLOAD_FOLDER'], "file.json")) as f:
  dic = json.load(f)

@app.route('/')
def index():
   return render_template('index.html', dict_elt=dic)

And I would like to display on my index.html submittable buttons which contain all the values coming from my json, with a search bar with a search bar associated with the the keys. Something like this :

|     SEARCH BAR      |
------------------       ------------------       ------------------ 
|       elt1     |       |      elt2       |      |      elt3       |
|3 infos         |       |3 infos          |      |4 infos          |
|key3 key4  key5 |       |key3 key4  key5  |      |key1 key2  key3  |
|                |       |                 |      |key4             |
------------------       -------------------      -------------------
------------------     
|      elt4      |      
|2 infos         |       
|key2 key3       |       
|                |     
------------------       

With an access to elt3_1 when I click on key1 in the 3rd button, and the page elt3.html when I click on the button 3. I thought using a loop in JQuery, but I don't understand how to combine all those elements :

<html>
  <head>
    <script src='static/jquery.js'></script>
    <script src='static/jquery-ui.js'></script>
    <script src='static/style.css'></script>
  </head>

  <body>                 
    <div>
      <input type="text" id="myInput" onkeyup="myFunction()" name="search" placeholder="Search for entity..">
      <div class="wrapper">
        <div class="button_grp">
          <ul id="myEnt">
            <div id=loopElt"></div>
          </ul>
        </div>
       </div>
     </div>
  </div>
</body>

<script>
var dict_elt = {{dict_elt | tojson }};
var elts = JSON.parse(dict_elt);;
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue, button;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myEnt");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

for (var i = 0; i < elts.length; i++) { 
    var buttons = $('<div class="item sheets"><li class="btn"><a href="#">'+ elts[i] + '</a></li></div>') 
    buttons.appendTo('#loopElt'); 
}   

style.css :

.wrapper{
    width: 1200px;
    margin: 50px auto;
}

.button_grp ul{
    display: flex;
}

.button_grp ul li{
    background: #fff;
    margin: 10px;
    padding: 10px 15px;
    min-width: 80px;
    transition: all 0.2s ease;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.125);
}

.button_grp ul li:hover{
    background: #0000fe;
    color: #fff;
}

This works when I work with var elts = ['Abc', 'Def', 'Ghi', 'Jkl'] instead of a json. I think I can find how to arrange that in order to get the good visualization. My first problem is the manipulation with the json

I know I have a lot to learn and I thank for any help :)