title: How to prevent canonical URL's
body: <p>I have an anchor link on <code>home.php</code> which goes link this:</p>
  
  <pre><code>&lt;a href='#?id=$thought_id' class='toggle-comment' data-id='$thought_id' '&gt; Comments ($num_of_comments) &lt;/a&gt;
  </code></pre>
  
  <p>When hovering over this anchor link, I expect to see results like this:</p>
  
  <pre><code>localhost/#?id=210
  </code></pre>
  
  <p>But what I am getting it this:</p>
  
  <pre><code>localhost/home.php#?id=211  
  </code></pre>
  
  <p>I have seen a similar question <a href="https://stackoverflow.com/questions/8764288/href-automatically-adds-to-current-page-url-in-php-cant-figure-it-out">here</a>: But, having applied what the best answer suggests, I still get the same results. I also have the exact same anchor link present on <code>profile_page.php</code> and it works perfectly there.</p>
  
  <p>The anchor link is not meant to go anywhere, on click, it dynamically enlarges the div below it, showing comments.</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p><strong>How anchor link works</strong>:</p>
  
  <ol>
  <li><p>when clicked, the anchor link expands the div below it. When clicked, this div appears: <code>echo "&lt;div id='toggleComment$thought_id' class='new_comment'&gt;";</code></p></li>
  <li><p>Then for each new comment added to this <code>thought</code>, another div is echo'd</p>
  
  <p><code>&lt;div class='new_comm' id='thoughtId".$thought_id."-childId".$comment['id']."'&gt;</code></p></li>
  </ol>
  
  <p><strong>JavaScript to achieve this</strong>:</p>
  
  <pre><code>$(function() {
      $("a.toggle-comment").on("click", function(event) {
          // prevents browser to go to href's #
          event.preventDefault();
          // uses Jquery's data() function to get comment id from link's data-id attribute
          var id = $(this).data('id');       
          // get element by id and toggle display
          var ele = document.getElementById("toggleComment" + id);
          $(ele).toggle();
      });
  });
  </code></pre>
  
  <p><strong>Edit 2</strong>:</p>
  
  <p>Came to a conclusion with Rocki in chat. The issue was that I have the JavaScript defined twice, once in the source code of <code>home.php</code> and once in <code>functions.js</code> which was also in the <code>head</code> of <code>home.php</code>. Removed the script from the source code, and code began to function.</p>