title: Change the color of the icon in jquery (django project)
body: <p>I added to the wish list for products.(django project)
  Users click on a heart-shaped icon if they add a product to this list.
  If a user has already added this product to the list, the heart icon is red, and if this product is not in the user's favorites list, the heart icon is white.
  I want to change the color of the icon each time I remove or add it to the list.
  In the code I wrote, this operation is done only once, and if it clicks again at the same time, there will be no change in color.</p>
  <pre><code>{% if request.user in product.favourite.all %}
      &lt;a  href=&quot;{% url 'home:favourite' product.id %}&quot;
         class=&quot;favourite-product fa-btn{{ product.id }}&quot;
         data-id='{{ product.id }}' data-text=&quot;remove&quot;&gt;
          &lt;i class=&quot;fa fa-heart test{{ product.id }}&quot; style=&quot;color:red&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  {% else %}
      &lt;a  href=&quot;{% url 'home:favourite' product.id %}&quot;
         class=&quot;favourite-product fa-btn{{ product.id }}&quot;
         data-id='{{ product.id }}' data-text=&quot;add&quot;&gt;
          &lt;i class=&quot;fa fa-heart test{{ product.id }}&quot; style=&quot;color:#eee;&quot;&gt;&lt;/i&gt;&lt;/a&gt;
  {% endif %}
  
  # ajax
  
  $(document).on('click', '.favourite-product', function (e) {
      e.preventDefault();
      const likeText = $(`.fa-btn${product_id}`).attr(&quot;data-text&quot;);
      const trim = $.trim(likeText)
      $.ajax({
          url: $(this).attr('href'),
          type: 'GET',
          data: {
              'product': product_id
          },
          success: function (response) {
              if (trim === 'add') {
                  $(`.test${product_id}`).css({&quot;color&quot;: &quot;red&quot;});
              } else {
  
                  $(`.test${product_id}`).css({&quot;color&quot;: &quot;#eee&quot;});
              }
          },
          error: function (response) {
              alert(&quot;error&quot;);
          }
      });
  });
  </code></pre>