title: Replace an object by another object in the same frame in JavaScript?
body: <p>I have created a list with to options on the homepage (index.html). The problem I am encountering is that when I run the code; if the user clicks on "list_row1" then "table1" shows up (everything works great), and after this if the user clicks on "list_row2" then "table2" shows up 100-200px below table1 (everything does not work great). I want table1 to simply be replaced by table2 and vice-versa in the same spot by the list (list_row1 and list_row2) option the person clicks on. </p>
  
  <p>For example, I want a red circle to be replace by a black circle and vice versa..</p>
  
  <p>Here is my <code>index.html</code> with <code>JavaScript</code> code below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    $('#list_row1').on('click',function(){
      $('#table2').hide();
      $('#table1').toggle();
    });
  
    $('#list_row2').on('click',function(){
      $('#table1').hide();
      $('#table2').toggle();
    });                     
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;ul class="list-group"&gt;
      &lt;div id = "list_row1"&gt;
        &lt;li class="list-group-item"&gt;Exhaust Temperature&lt;/li&gt;
      &lt;/div&gt;
      &lt;div id = "list_row2"&gt;
        &lt;li class="list-group-item"&gt;Cylinder Pressure&lt;/li&gt;
      &lt;/div&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id = "table1"&gt;&lt;/div&gt;
  &lt;div id = "table1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>