title: Show hide form elements Jquery/Bootstrap
body: <p>I have a set of form fields (generated through wtforms) I really only need to show one, and then have an add button:</p>
  
  <hr>
  
  <pre><code>&lt;div class=element-work&gt;
  
              &lt;table id="identifier-0"&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-0-organization"&gt;Organization&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-0-organization" name="identifier-0-organization" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-0-position"&gt;Position&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-0-position" name="identifier-0-position" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-0-start_time"&gt;Start&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-0-start_time" name="identifier-0-start_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-0-end_time"&gt;End&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-0-end_time" name="identifier-0-end_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
              &lt;table id="identifier-1"&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-1-organization"&gt;Organization&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-1-organization" name="identifier-1-organization" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-1-position"&gt;Position&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-1-position" name="identifier-1-position" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-1-start_time"&gt;Start&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-1-start_time" name="identifier-1-start_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-1-end_time"&gt;End&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-1-end_time" name="identifier-1-end_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
              &lt;table id="identifier-2"&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-2-organization"&gt;Organization&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-2-organization" name="identifier-2-organization" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-2-position"&gt;Position&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-2-position" name="identifier-2-position" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-2-start_time"&gt;Start&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-2-start_time" name="identifier-2-start_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-2-end_time"&gt;End&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-2-end_time" name="identifier-2-end_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
              &lt;table id="identifier-3"&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-3-organization"&gt;Organization&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-3-organization" name="identifier-3-organization" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-3-position"&gt;Position&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-3-position" name="identifier-3-position" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-3-start_time"&gt;Start&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-3-start_time" name="identifier-3-start_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-3-end_time"&gt;End&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-3-end_time" name="identifier-3-end_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
              &lt;table id="identifier-4"&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-4-organization"&gt;Organization&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-4-organization" name="identifier-4-organization" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-4-position"&gt;Position&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-4-position" name="identifier-4-position" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-4-start_time"&gt;Start&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-4-start_time" name="identifier-4-start_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th&gt;&lt;label for="identifier-4-end_time"&gt;End&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="identifier-4-end_time" name="identifier-4-end_time" type="text" value=""&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>My options:</p>
  
  <p>1) load all with the page, use js to show/hide fields as needed</p>
  
  <p>2) have js clone/add fields when a button is pressed</p>
  
  <p>Either is fine, but option 1 is the least work at the moment(but I guess more bandwidth consumption in the long run for billions of queries, but I'm not worrying about this now): what is the simplest way with jquery/bootstrap to hide show subsequent parts of the field as necessary? I'm not really a js person, but looking into it it should be simple enough, but I'm posting to see what solutions people have to offer while I work on this.</p>