title: How to have a button associated with div for dynamic content
body: <p>I currently have and HTML page that receives data about a group of people from a Flask script as so.</p>
  
  <pre><code>return render_template('test.html', data = response)
  </code></pre>
  
  <p>I can currently get all the data to correct print on the page, but what I want to do is make a button that toggles the information. For example the fields in the listed in the HTML below are name, age, height, and weight; What I want do is make the name a button that toggles the age, height, and weight for that particular person. In my current implementation I have implemented a button, however it toggles the information for all the people that are displayed on the page rather than the individuals whose name I clicked on.</p>
  
  <p>So my question to you guys out there is if there is any way to get a button to associate with a particular div to toggle? </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;A Title&lt;/title&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                  $("button").click(function(){
                      $("div").toggle();
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          {% for item in data.Items %}
          &lt;button&gt;Person Name:   {{ item.name }}&lt;/button&gt;&lt;br&gt;
          &lt;div&gt;
              Age:   {{ item.age }}&lt;br&gt;
              Height:   {{ item.height }}&lt;br&gt;
              Weight:   {{ item.weight }}&lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          {% endfor %}
  
      &lt;/body&gt;
  </code></pre>