Why cant I change the display of my HTML table to 'block' using the jquery and the table id

See more:

Javascript

CSS

Python

jQuery

I have a jinja template that receives a list of twitter status' and their replies. The original tweets are listed to the left, and their replies in dynamically generated tables to the right, each with the conversation_id as the id of the table. When an original tweet is clicked, it should should change the display of the replies (using the conversation id) to 'block' I have tried various methods to display but none work for that function. The loader works fine so I suspect it might be something to do with how the id variable is passed to the JS function, but I really don't know. If I set the display to 'block' on the replies-table, the replies all show so I know the data is all being loaded.

Here is the code for the template.
<pre lang="Python">I have a jinja template that receives a list of twitter status' and their replies. The original tweets are listed to the left, and their replies in dynamically generated tables to the right, each with the conversation_id as the id of the table. When an original tweet is clicked, it should should change the display of the replies (using the conversation id) to 'block'

Here is the code for the template.

<pre>{% extends "base.html" %}
{% block content %}
<div id="loader-container">
    <div id="loader"></div>
    <div id="loader-text" class="text-center">
        <h4>Downloading conversations, please be patient.</h4>
    </div>
</div>
<div id="content">
    <div class="container m-3">
        <h1 class="text-center">Download Twitter Conversations</h1>
    </div>
    <hr>
    <form class="form" action="{{  url_for('download_conversations')  }}" method="post">
        <div class="row">
            <div class="col-lg-4">
                <div>Twitter Handle</div>
                <div class="row">
                    <input type="text" name="screen-name" id="screen-name" required>
                </div>
            </div>
            <div class="col-lg-4">
                <div>Conversation Count</div>
                <div class="row">
                    <input type="text" name="count" id="count" min="1" max="100" required>
                </div>
            </div>
            <div class="col-lg-4 p-3">
                <button class="btn" type="sumbit" onclick="loading();">Get Conversations</button>
            </div>
        </div>
    </form>
    <hr>
    <div class="row">
        <div class="col shadow-lg">
            <table class="table table-dark text_white">
                <thead>
                    <tr>
                    <th scope="col">Handle</th>
                    <th scope="col">Tweet</th>
                    <th scope="col">Replies Count</th>
                    </tr>
                </thead>
                <tbody >
                    {%  if conversations != None  %}
                    {%  for c in conversations  %}
                    <a href="">
                        <tr onclick="showReplies({{  c.conversation_id  }})" style="user-select: none;">
                            <td>{{  c.screen_name  }}</td>
                            <td>{{  c.original_text  }}</td>
                            <td>{{  c.replies | length  }}</td>
                        </tr>
                    </a>
                    {%  endfor  %}
                    {%  endif  %}
                </tbody>
            </table>
        </div>
        <div class="col shadow-lg">
            {%  if conversations != None  %}
                {%  for c in conversations  %}
                    {%  if c.replies != None  %}
                        <table class="table table-dark text_white replies-table" id="{{  c.conversation_id  }}">
                            <thead>
                                <tr>
                                    <th scope="col">Handle</th>
                                    <th scope="col">Tweet</th>
                                </tr>
                            </thead>
                            <tbody >
                                {%  for r in c.replies  %}                                              
                                    <tr style="user-select: none;">
                                        <td>{{  r.screen_name  }}</td>
                                        <td>{{  r.text  }}</td>
                                    </tr>
                                {%  endfor  %}
                            </tbody>
                        </table>                        
                    {%  endif  %}
                {%  endfor  %}
            {%  endif  %}
        </div>
    </div>
</div>

<script type="text/javascript">// <![CDATA[
    function loading(){
        $("#content").hide(); 
        $("#loader").show();
        $("#loader-text").show();
              
    }
// ]]></script>
<script type="text/javascript">
    function showReplies(id){
        $("replies-table").hide(); 
        id = '#'.concat(id.toString())
        $(id).style.display = "block";          
    }
</script>
{%  endblock  %}

and the only css for the replies-table

.replies-table{
    display: none;
  }

Any help greatly appreciated!

Thanks a lot

What I have tried:

I have tried various methods to display but none work for that function. The loader works fine so I suspect it might be something to do with how the id variable is passed to the JS function, but I really don't know. If I set the display to 'block' on the replies-table, the replies all show so I know the data is all being loaded.