title: I'm using ajax to set up a view of uploaded data, but it works in first item only
body: <p>I have to set up the user should be able to view the contact info of customer, For that I'm using ajax. the code is working but the problem is the ajax is only working in the first item, other buttons are not working what is the reason
  another issue is when i hit the button again it showing data agin and agin how to control it</p>
  <p>how to solve these two issues</p>
  <p>views.py</p>
  <pre><code>def contact_details(request):
  
  property_details = Property.objects.all()
  seraializer = PropertySerializer(property_details, many=True)
  data = seraializer.data
  return JsonResponse(data, safe=False )
  </code></pre>
  <p>HTML page(including ajax)</p>
  <pre><code>{% if accomodations %}  
  {% for accomodation in accomodations %}
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-sm-2 col-md-2&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-sm-4 col-md-4&quot;&gt;
          &lt;img src=&quot;{{accomodation.images.url}}&quot; class=&quot;img-responsive&quot; style=&quot;width:100%&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-sm-5 col-md-5&quot;&gt;
          &lt;div class=&quot;caption&quot;&gt;
              &lt;h3&gt;{{ accomodation.headline }}&lt;/h3&gt;
              &lt;div&gt;
                  {{ accomodation.city }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ accomodation.location }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ accomodation.facilites }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ accomodation.rent }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ accomodation.owner }}
              &lt;/div&gt;
              &lt;div&gt;
                  {{ accomodation.id }}
              &lt;/div&gt;
              
              &lt;button id=&quot;request-btn&quot; name=&quot;property_id&quot;  class=&quot;btn btn-primary&quot;&gt;Contact info:&lt;/button&gt;
              &lt;/form&gt;
              &lt;div id=response&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  {% endfor %}
  
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
        &lt;script type=&quot;text/javascript&quot;&gt;
  
            $(document).ready(function(){
            $(&quot;#request-btn&quot;).click(function(){
          
                   $.ajax({
                     url: &quot;{% URL 'contact_details' %}&quot; ,
                     type: &quot;GET&quot;,
                     dataType:&quot;json&quot;,
                     success: 
               function(result){
  
                $.each(result, function() {
                    html = &quot;Email:&quot; +this.email + &quot;&lt;br&gt;&quot; +&quot;Mobile:&quot; + this.mobile +&quot;&lt;hr&gt;&quot;
               $(&quot;#response&quot;).append(html)
              });
          }
      });
      });
  }); 
  
  
  &lt;/script&gt;
     {% else %}
      &lt;h1&gt;Not Found&lt;/h1&gt;
      {% endif %}
  </code></pre>