Jquery onclick event icon color is not changing

Question

for example here i have three icon (fa fa-heart),Normally icon color is green, My requirement is,if icon 2 is clicked, the background color should change red using an onclick event. suppose again i am clicking same icon 2 means background color should change in green, after that i am clicking icon 3 means background color should change red, I have tried but I am not able to do this. i am getting answer like this, If I click icon 2, icon 1 color is changing. If I click icon 3 , icon 1 color is changing. like every time icon 1 is changing color

<div class = "col-md-8 top-a rentListing"> </div>

 function searchLocality() {

   var city = "something";
   var locality = "something";

   $.ajax({
     type: "POST",
     data: {
       city: city,
       locality: locality
     },
     url: "rentlocalityFilter.php",
     success: function(data) {

       var htmlString = '';
       $.each(res['data'], function(key, value) {
         var id = value.id;
         htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="button" onclick="setColor(' + value.id + ')"></i></a>';

       });
       $('.rentListing').empty().append(htmlString);

     }

   });

 }
 var count = 1;

 function setColor(id) {
   var btn = 'button';
   var color = '#101010';

   var property = document.getElementById(btn);
   if (count == 0) {
     property.style.backgroundColor = "green"
     count = 1;
   } else {
     property.style.backgroundColor = "red"
     count = 0;
   }
 }

Answer 1

Please find updated code , In your code you are using static id of button so it will update that only.

You have to pass id of actually clicked icon to javascript function and function should store that for that icon its is clicked first time or clicked previously. That needs to be saved in javascript

Note: Code is not tested its just providing you logic how to implement it

     <div class = "col-md-8 top-a rentListing"> </div>

         function searchLocality() {

       var city = "something";
       var locality = "something";

       $.ajax({
           type: "POST",
           data: {
               city: city,
               locality: locality
           },
           url: "rentlocalityFilter.php",
           success: function(data) {

               var htmlString = '';
               $.each(res['data'], function(key, value) {
                   var id = value.id;
                   htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="' + value.id + '" onclick="setColor(' + value.id + ')"></i></a>';

               });
               $('.rentListing').empty().append(htmlString);

           }

       });

   }
   var count = 1;

   var objCount = {};

   function setColor(id) {
       var btn = id;
       var color = '#101010';
       if (objCount && objCount[id] != undefined) {
           if (objCount[id] == 0) {
               objCount[id] = 1;
           } else {
               objCount[id] = 0;
           }
       } else {
           objCount[id] = 1;
       }


       var property = document.getElementById(btn);
       if (objCount[id] == 0) {
           property.style.backgroundColor = "green"
           objCount[id] = 1;
       } else {
           property.style.backgroundColor = "red"
           objCount[id] = 0;
       }
   }

Answer 2

$('.fa-heart').on('click',function(){
    $(this).toggleClass('redBackground');
});

Each time you click a heart the class will be toggled - if it is present it will be removed.

This can be further developed into

$(this).toggleClass('redBackground greenBackground');

css:

.redBackground{background-color:red}