Add a Like + Sort Function to existing dynamic funcion

Question

I wrote a function that dynamically creates a webpage for me based on a json database.

Now I want to add 2 functions:

If you click the like img (its got the id button) the like counter should increase on the webpage by 1. Pretty easy just a on(click) with jQuery variable++ and then .text(variable)
A sort function - based on the likes one item received, you should be able to sort it (most liked div first, 2nd, 3rd....

I can write it for each individually with individual variables when I give all the like buttons and outputs a separate id but I wanted to make it dynamic so if you add new data to json file it dynamically works with the like and sort function.

The likes are not saved anywhere for now.

Since sitting on it for 3h and google so much and so much stackoverflow I think I overloaded my brain with different stuff and now nothing seems to work ^^

function filmInsert(insert) {
    $.each(film, function(i, data) { //.each statt loop
      let box = 

      `
      
      
    
    
        ${data.titel}
        ${data.beschreibung}
         
           Like
          
          ${data.likes}
        
      
    `;
      insert.append(box);
    });
  }

user_3943125 · Answer

I've added a container element for the boxwrapper items as I assume you have one and as it's better to have one instead of just adding the sorted items to the body of the HTML document.

$(document).on("click", ".textbox a", function() {
  let likes = parseInt($(this).closest(".textbox").find("span").text());
  $(this).closest(".textbox").find("span").text(likes + 1);
});
$("#sort").on("click", function() {
  let divs = $(".boxwrapper")
  let sorted = divs.sort(function(a, b) {
     return $(a).find("span").text() < $(b).find("span").text() ? 1 : -1;
  });
  $(".container").html(sorted);

});



  
    
      
    
    
      Titel
      Description
       
           Like
        
        0
      
    
  
  
    
      
    
    
      Titel 2
      Description 2
       
           Like
        
        0

Add a Like + Sort Function to existing dynamic funcion

1 Answers