Refreshing datatable with new data using django ajax and js

Question

I've been using a modal where i can update user accounts that are in the datatable. I've been trying to figure out how to use ajax to refresh data after submitting the modal but what usually happens, is the table keeps duplicating and ends up crashing the browser before i can even try out the edit account function itself.

datatable from admin.html page I wish to refresh

<div class="x_content">
                <div class="col-md-9" style="padding-left: 0;width: 80%" id="testRefresh">
                     <table id="datatable" class="table table-striped table-bordered projects dt-responsive" style="border:0; width: 100%">
                      <thead>
                        <tr>
                          <th style="text-align: center; width:10%; font-weight: 700">Group</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Member</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Router</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Switch</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Terminal</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for groups in groups %}
                        <tr>
                          <td>
                            <a href="#editGrp-{{groups.id}}" data-toggle="modal"><strong>{{ groups.name }}</strong></a>
                            <br />
                          </td>
                          <td>
                          <ul class="list-unstyled">
                          {% for user in users %}
                            {% ifequal user.profile.group.id groups.id %}
                            <li><a href="#editAcct-{{user.id}}" data-toggle="modal">{{user.username}}</a></li>
                            {% endifequal %}
                          {% endfor %}
                          </ul>
                        </td>


                        <td>
                        {% for gtd in grouptodevice %}
                         {% ifequal gtd.group.id groups.id %}
                          {% ifequal gtd.type 'AP' %}
                           {% ifequal gtd.device.type 'Router' %}
                            <ul class="allocatedDev-list">
                              <li style="padding-left: 0">                                 
                                <a>
                                  <img src="{% static 'production/images/routerAvatar.png' %}" class="avatar" alt="Avatar" style="margin-right: 6px">
                                  <strong>{{gtd.device.name}}</strong>
                                  <br/>
                                  <small>{{ gtd.startDateTime }} - {{ gtd.endDateTime }}</small>
                                </a>
                              </li>
                            </ul>
                           {% endifequal %}
                          {% endifequal %}
                         {% endifequal %}
                        {% endfor %}
                        </td>
                        <td>
                        {% for gtd in grouptodevice %}
                         {% ifequal gtd.group.id groups.id %}
                          {% ifequal gtd.type 'AP' %}
                           {% ifequal gtd.device.type 'Switch' %}
                            <ul class="allocatedDev-list">
                              <li style="padding-left: 0">                                 
                                <a>
                                  <img src="{% static 'production/images/switchAvatar.png' %}" class="avatar" alt="Avatar" style="margin-right: 6px">
                                  <strong>{{gtd.device.name}}</strong>
                                  <br/>
                                  <small>{{ gtd.startDateTime }} - {{ gtd.endDateTime }}</small>
                                </a>
                              </li>
                            </ul>
                           {% endifequal %}
                          {% endifequal %}
                         {% endifequal %}
                        {% endfor %}
                        </td>
                        <td>
                        {% for gtd in grouptodevice %}
                         {% ifequal gtd.group.id groups.id %}
                          {% ifequal gtd.type 'AP' %}
                           {% ifequal gtd.device.type 'Terminal' %}
                            <ul class="allocatedDev-list">
                              <li style="padding-left: 0">                                 
                                <a>
                                  <img src="{% static 'production/images/terminalAvatar.png' %}" class="avatar" alt="Avatar" style="margin-right: 6px">
                                  <strong>{{gtd.device.name}}</strong>
                                  <br/>
                                  <small>{{ gtd.startDateTime }} - {{ gtd.endDateTime }}</small>
                                </a>
                              </li>
                            </ul>
                           {% endifequal %}
                          {% endifequal %}
                         {% endifequal %}
                        {% endfor %}
                        </td>        
                        </tr>
                      {% endfor %}
                      </tbody>

                    </table>                      
                </div>

javascript ajax script

<script>
  // Refresh the Table every 5 seconds
 function refresh(){
      $.ajax({    
         url: '/ #datatable',
            success: function(data) {
            $('#testRefresh').html(data);
            setTimeout(refresh, 1000);
            }
      });
  }

  setTimeout(refresh, 1000);
</script>