I have a modal within a div I want to pop up when any button inside my table is clicked. it will be fetching data from an API as the question and the form is for the user to answer and it will display either correct or incorrect and each button will show it's been 'used' after being clicked. The table has 5 columns and 6 rows including the title row. I am trying to create an onclick function for this.

```html

          <tr>
            <td><button id="21" data-category="255">500</button></td>
            <td><button id="22" data-category="190">500</button></td>
            <td><button id="23" data-category="135">500</button></td>
            <td><button id="24" data-category="145">500</button></td>
            <td><button id="25" data-category="130">500</button></td>
          </tr>
        </table>
      </div>
      <div class="board">
        <!-- categories get injected here -->
     </div>
      <!-- answers container -->
      <div class="card-modal">
        <button type="button" class="open-modal" data-open="modal1">...</button>
        <div class=card-modal-inner>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
           <h2 class="clue-text"><!-- clue gets added here --></h2>
           <form autocomplete="off">
              <input name="user-answer" type="text" />
              <button type="submit">Answer</button>
           </form>
           <div class="result">
              <p class="result_success">CORRECT</p>
              <p class="result_fail">INCORRECT</p>
              <p class="result_correct-answer">
                 The correct answer is <span class="result_correct-answer-text"><!--answer gets injected here--></span>
              </p>
           </div>
        </div>
     </div>
 </div>
```