title: JS / jQuery: How to filter and serve Ajax called data based on multiple selections?
body: <p>I'm trying to make Ajax call to server based on the selection by the user in the following flow:</p>
  
  <ul>
  <li>User selects a Company</li>
  <li>Ajax call is made to request data of all products based on the Company's selection</li>
  <li>User selects the product by clicking on one of the buttons for example product A, B or C</li>
  <li>User gets the information based on the <em>selected produc</em>t of the <em>selected company</em></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/abook.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/abook.png" alt="enter image description here"></a></p>
  
  <p>Here is my code but the problem is that when user selects Company Alpha and then productA everything goes smooth. But when user selects Company Bravo and then productA I get data for both Company Alpha and Company Bravo for productA by doing <code>console.log(data)</code>. Afterwards, if the user selects Company Charlier and then productA, I get data for all three companies for this product.</p>
  
  <pre><code>$("#company").change(function () {
  
      var companySelected = $('#company').find(":selected").val();
  
      $.ajax({
  
          url: "{% url 'company_product_data' %}",
          method: 'GET',
          data: {
              company_category: companySelected,
          },
          success: function (data) {
              $("#productA, #productB, #productC").click(function () {
                  console.log($(this).attr('id'));
                  console.log(data)
              });
          },
          error: function (error_data) {
              console.log("error")
              console.log(error_data)
          }
  
      });
  
  });
  </code></pre>
  
  <p>Can anyone please tell me where I'm doing things wrongly and how can I fix it?</p>