How can I show multiple id as latex equation by using mathquill?

I am trying to make a symbol palette where there will be an input field and I will click on a button that contains a latex symbol that will be the input in the field. As there will be multiple symbols, I am trying to use multiple buttons and MQ.StaticMath to show the latex equation. But the first id is accepting my latex output. Unfortunately, not the rest ids. I tried with class instead of id and using getElementByClassName in the script but not working as well. Here I am sharing my code and screenshots. Hoping someone can help me out with it.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Run Mathquill</title>


    <!-- YOU NEED  mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN  NOT RUN-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"
        integrity="sha512-vPg9GqsZZ4LHv9BkFfZSXt7y4D7YaARPU2JFmpZug4EgtJJrumytMAFZkNSk2LSyqWir0TNbh2tBq7UJIMxvlA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"
        integrity="sha512-7jEhcM7FbjGHo1ejs1iw1J8FxcnACx7Z3lG29gQ5vTBe2U/gaQpzwjzPCyg32zTwXCloQDdorpLufmu0nBIqnQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- INFORM  THE LATEST AVERSION INTERFACE WITH THIS CODE   -->
    <script>
        var MQ = MathQuill.getInterface(2);
    </script>


</head>
<body>
<br>
<button id="symbol">\sqrt{}</button>
<button id="symbol">\frac{1}{2}</button>
<script>
    var symbols = document.getElementById('symbol');
    MQ.StaticMath(symbols);
</script>


</body>

</html>

And the output if I comment on one line another works perfectly but I need both or more to work.

As it's visible only one is working.

Solution

You have multiple button elements to handle. So you need to use js forEach.

<script>
   var MQ = MathQuill.getInterface(2);
   var symbols = document.querySelectorAll('#symbol');
   symbols.forEach(MQ.StaticMath);
</script>