title: Error: Duplicate HTML elements in Jekyll when JavaScript is embedded
body: <p>I am facing issues with embedded JavaScript for p5js and Table of Contents using jQuery in my Jekyll site. Jekyll renders 2 different elements - 1 element is non-functional and the other element works perfectly fine.</p>
  <p>The page is unintentionally duplicating the JavaScript element. You can view the results on the site: <a href="https://fallinginenigma.github.io/p5js/" rel="nofollow noreferrer">P5js.</a> and a <a href="https://i.stack.imgur.com/iYj15.png" rel="nofollow noreferrer">picture</a></p>
  <p>How do I correct this error from JavaScript creating two different HTML elements?</p>
  <p>The source code is on GitHub at <a href="https://github.com/fallinginenigma/fallinginenigma.github.io" rel="nofollow noreferrer">Fallinginenigma</a></p>
  <p>JavaScript code being use on the site:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;simple_sketch.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>The rendered HTML site has two elements:</p>
  <pre><code>    &lt;div id=&quot;simple-sketch-holder&quot;&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;/assets/posts/p5js/1.js&quot;&gt;&lt;/script&gt;
  &lt;canvas id=&quot;defaultCanvas0&quot; style=&quot;width: 710px; height: 400px;&quot; width=&quot;710&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;defaultCanvas1&quot; style=&quot;width: 710px; height: 400px;&quot; width=&quot;710&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  </code></pre>