title: How can I select clicked content?
body: <p>How can I select clicked content?Now I am making a system when I click a button, the data is shown in nav tag.
  I wrote codes in views.py</p>
  
  <pre><code>class TopView(TemplateView):
      model = Data
      template_name = 'index.html'
  
      def get_context_data(self, **kwargs):
          context = super().get_context_data(**kwargs)
          context['data'] = Data.objects.all()
          return context
  </code></pre>
  
  <p>When I click a button, all data is shown in nav tag of index.html.I want to show only clicked data in nav tag.I think I wrote codes so, but what is wrong in my codes?How should I fix this?</p>
  
  <pre><code>&lt;html lang="ja"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.0.0.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;HOMEPAGE&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;style&gt;
     nav {
      width: 312px;
      height: 100%;
      transition: all 0.2s;
      transform: translate(312px);
      position: fixed;
      top: 0;
      right: 0;
      z-index: 1000;
      background-color: #FFF;
     }
     nav.open {
      transform: translate(0);
     }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;script&gt;
  $(function(){
    $('.btn_menu').click(function(){
      $(this).next('nav').toggleClass('open');
    });
  })
  &lt;/script&gt;
  &lt;body&gt;
  
      &lt;section id="center"&gt;
                          &lt;button type="button" class="btn_menu"&gt;
                              AAA
                          &lt;/button&gt;
                          &lt;button type="button" class="btn_menu"&gt;
                              BBB
                          &lt;/button&gt;
                          &lt;button type="button" class="btn_menu"&gt;
                              CCC
                          &lt;/button&gt;
  
      &lt;/section&gt;
  
      &lt;nav&gt;
          &lt;h2&gt;HOMEPAGE&lt;/h2&gt;
          &lt;!----&gt;
  　               &lt;h4&gt;AAA&lt;/h4&gt;
  　               &lt;p&gt;aaa&lt;/p&gt;
          &lt;!----&gt;
  　               &lt;h4&gt;BBB&lt;/h4&gt;
  　               &lt;p&gt;bbb&lt;/p&gt;
          &lt;!----&gt;
  　               &lt;h4&gt;CCC&lt;/h4&gt;
  　               &lt;p&gt;ccc&lt;/p&gt;
          &lt;!----&gt;
      &lt;/nav&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>