title: Using JQuery to hide multiple divs
body: <p>I'm writing a web app that gives you 2 template options on create.php</p>
  
  <p><br>
  <strong>In template 1, you have the follwing in put options</strong></p>
  
  <pre><code>&lt;input type="file" name="image1" id="image1" required /&gt;
  
  &lt;input type="file" name="image2" id="image2" required /&gt;
  </code></pre>
  
  <p><br><br>
  <strong>In template 2, the user has 3 extra input options.</strong> </p>
  
  <p>However, I don't want these 3 extra inputs to show for anyone using template 1. </p>
  
  <p>Therefore I decided that I would surround the inputs with <code>&lt;div id="template2"&gt;</code> so that I can just use</p>
  
  <p><code>$('#template2').hide()</code> to remove the extra 3 inputs inputs. See below</p>
  
  <pre><code>&lt;input type="file" name="image1" id="image1" required /&gt; &lt;input type="file" name="image2" id="image2" required /&gt;
  
  &lt;div id="template2"&gt;&lt;input type="file" name="image3" id="image3" required /&gt;&lt;div&gt;
  
  &lt;div id="template2"&gt;&lt;input type="file" name="image4" id="image4" required /&gt;&lt;div&gt;
  
  &lt;div id="template2"&gt;&lt;input type="file" name="image5" id="image5" required /&gt;&lt;div&gt;
  </code></pre>
  
  <p>The problem Is that this hide is only removing one of the template 2 divs, but the others are remaining. </p>
  
  <p>I also tried looping <code>$('#template2').hide()</code> three times, but that didn't solve the issue either. </p>
  
  <p>So I'm kind of out of ideas at this point...</p>