title: How to change Input on switch function to class for multiple items
body: <p>I have a working jQuery Function which detects if an input is checked then it outputs a notification message and updates the html value and updates mysql via php ajax. Everything is working fine on a single page but I really can't figure out how to implement it for several items on a page. Here is what I got in jQuery.</p>
  
  <p>The Structure is the same on both sites, but I don't know where to start or got no good idea.</p>
  
  <p>Feel Free to add classes or something to get it started or to run please.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(elem) {
    var checkBox = elem;
    if (checkBox.checked == true) {
      $('.alert-box').remove();
      var currentValue = $(".lovecount").text();
      var newValue = +currentValue + 1;
      $(".lovecount").text(newValue);
  
      var postid = $("#toggle").attr("data-post");
      var userid = $("#toggle").attr("data-userid");
      //get actual ip
  
      dataString = 'userid=' + userid + '&amp;postid=' + postid;
  
      $.ajax({
        type: 'POST',
        url: 'inc/give-love.php',
        data: dataString,
        success: function(response) {
        }
      });
  
      $('&lt;div class="alert-box success" &gt;&lt;i class="fa fa-heart"&gt;&lt;/i&gt; Liebe gegeben!&lt;/div&gt;').prependTo('body').delay(3000).fadeOut(1000, function() {
  
        $('.alert-box').remove();
  
      });
    } else {
      $('.alert-box').remove();
      var currentValue = $(".lovecount").text();
      var newValue = +currentValue - 1;
      $(".lovecount").text(newValue);
  
      var postid = $("#toggle").attr("data-post");
      var userid = $("#toggle").attr("data-userid");
      //get actual ip
  
      dataString = 'userid=' + userid + '&amp;postid=' + postid;
  
      $.ajax({
        type: 'POST',
        url: 'inc/give-love.php',
        data: dataString,
        //beforeSend : function(xhr, opts){
  
        //check ips from db if actual ip exists 
  
        //if(1 == 2) //if ip already exists for actual post block submit(success) and display message in button like in success
        //{
        //    xhr.abort();
        //    $("a.btn-default.ja").css("border", "#c85555");
        //    $("a.btn-default.ja").css("background", "#7dc85575");
        //    $('a.btn-default.ja').html("Du hast bereits gevoted für dieses Tutorial"); 
        //    $('a.btn-default.nein').hide(); 
        //}
        //else success  
        //},
        success: function(response) {
        }
      });
  
      $('&lt;div class="alert-box success" &gt;&lt;i class="fa fa-heart-o"&gt;&lt;/i&gt; Liebe genommen!&lt;/div&gt;').prependTo('body').delay(3000).fadeOut(1000, function() {
  
  $('.alert-box').remove();
      });
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="add-favorite" id="heart-container"&gt;&lt;a href="#" title="Alle Loves anzeigen"&gt;&lt;span class="lovecount"&gt;0&lt;/span&gt;&lt;/a&gt;
  
    &lt;input data-post="123" data-userid="1" type="checkbox" id="toggle" onclick="myFunction(this)"&gt;
  
    &lt;div id="twitter-heart" class=""&gt;&lt;/div&gt;
    &lt;/input&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>