Hi team,

I have a page where for every post there is some commented posted by the users in the bottom. I have attached two images vote up and vote down to every post, and now I want to count the number of vote up and vote down to that particular post. I am not sure how to achieve this and how to correlate the post with the Vote up and down. Kindly suggest. below is the VF and controller code.

VF code =========================================

<apex:page controller="ContentsCalculation">
<script type="text/javascript">
var i=0,j=0;

function increase()
{
i++;
alert(i);
document.getElementById('inc').innerHTML= +i;
}

function decrease()
{
j--;
alert(j);
document.getElementById('dec').innerHTML= -j;

}
</script>
<apex:form >
 <apex:pageblock >
 
<style type = "text/css"> 
            .Textarea{
    height: 1em;
    width: 50%;
    padding: 3px;
    transition: all 0.5s ease;
}
Textarea:focus{
    height: 4em;
    width: 30em;
}


   </style>
    
         <apex:outputText value="{!headlines.Name}" style="font-size:20px"/> <br></br>
             <apex:outputText value="{!headlines.CreatedDate}"> 
                </apex:outputText>
                <hr>
                </hr>
                <apex:outputText value="{!headlines.Contents__c}">
                </apex:outputText>
                <hr></hr>
                <apex:outputText value="RecentMessage" style="font-size:20px" styleClass=".aDiff"></apex:outputText>

  <br></br><p>
  <!--<input type ="text" id = "comment" min="1" max="1000" placeholder = "Add your comments here" styleClass = ".aDiff" value= "{!commentValue}" />-->
        <table>
           <tr><td> <apex:inputTextarea value="{!commentValue}" styleClass="tex" rows="1" cols="30" html-placeholder="Add you comments here:"/></td>
           
            <td><apex:commandButton action="{!saveComment}" value="Post"  /> </td></tr> 
            
              </table> </p>
              
              <apex:outputLabel value="Sort by :"></apex:outputLabel>
                
                 <apex:selectList id="selectedOption" value="{!selectedOption}" multiselect="false" size="1">                  
               <apex:actionSupport event="onchange" action="{!selected}" reRender="theForm" status="loading"/> 
                 <apex:selectOptions value="{!Items}">
                  </apex:selectOptions> 
                    </apex:selectList>
                    <br></br>
                    <apex:actionStatus id="loading" >
                        <apex:facet name="start" >
                          <img src="{!$Resource.Loading}" height = "50" width = "80"/>                    
                        </apex:facet>
                   </apex:actionStatus>
               
    <hr> <apex:outputPanel id="theForm" >
     
     <apex:pageBlockSection >
       <apex:repeat var="list" value="{!CommentsData}">
               <apex:repeat var="p" value="{!list.Comments__r}">
             <apex:image id="dec" url="{!URLFOR($Resource.Vote_Down)}" height="15" onclick="decrease();" >
               <apex:image id="inc" url="{!URLFOR($Resource.Vote_Up)}" height="13" onclick="increase();"> 
                    
                  <apex:outputText value="{!p.Comment__c}" label=""></apex:outputText><br></br><br></br></apex:image>&nbsp; &nbsp;  &nbsp;</apex:image>
            
              <br/>
              
             </apex:repeat>
             
      </apex:repeat>
 </apex:pageBlockSection>

     </apex:outputPanel>    </hr>
    </apex:pageblock>          
    </apex:form>
</apex:page>

============================

Controller code 
=========================================================

public Class ContentsCalculation
{

    

    public List<Comments__c> saveComment1 { get; set; }    
  public Headlines__c headlines{get;set;}
  public String selectedOption{get;set;}
  public String commentValue{get;set;}
   public ContentsCalculation() {

        headlines = [select id,Name,Contents__c,CreatedDate from Headlines__c where Id = :ApexPages.currentPage().getParameters().get('id') ];
        
}
public List<SelectOption> getItems(){

                                          
                                              List<SelectOption> items  = new List<Selectoption>();
                                            items.add(new selectoption('None','None'));
                                               items.add(new selectoption('Newest','Newest'));
                                               items.add(new selectoption('Oldest','Oldest'));
                                               return items;
                                           
                                        }
                                      
    public PageReference selected() {
    System.debug('#####Select Option value##### ' +selectedOption);
            return null;
    }

 public PageReference saveComment()
 {
   
    saveComment1 = new List<Comments__c>();
    System.Debug('****)Comment****'+commentValue);
    
 if(commentValue != NULL && commentValue != '')
 {
 for(Headlines__c head :[select id from Headlines__c where ID = :headlines.id])
    {
    saveComment1.add(new Comments__c(Headline__c= head.id,Comment__c = commentValue,Name = commentvalue));
    
   }
   insert saveComment1;
   }
   
   else
   {
   System.Debug('****throwing error ***');
    Apexpages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO,''+'Please provide an input"'));
   }
   refreshData();
   return null;
 }
 
 public void refreshData()
 {
  System.Debug('!!!!!!!! Refreshing ');
   commentValue = '';
 }
 
 public List<Headlines__c> getCommentsData()
 {
 List<Headlines__c> listOfComments = new List<Headlines__c>();
  // List<Headlines__c> listOfComments = [select Id, Name,(Select Id,Comment__c,CreatedDate from Comments__r ORDER BY CreatedDate DESC) from Headlines__c where ID = :headlines.id ];
    System.debug('**list of comments' +listOfComments);
    SYstem.debug('#####Select Option value##### ' +selectedOption);
    if(selectedOption == 'Newest')
    {
     listOfComments = [select Id, Name,(Select Id,Comment__c,CreatedDate from Comments__r ORDER BY CreatedDate DESC) from Headlines__c where ID = :headlines.id ];
    }
    
    else if(selectedOption == 'Oldest')    
   {
   listOfComments = [select Id, Name,(Select Id,Comment__c,CreatedDate from Comments__r ORDER BY CreatedDate ASC) from Headlines__c where ID = :headlines.id ];
   }
                   
   return listOfComments;
 
 }
 public List<User> getUsers(){
    // Here getting ALL users of the org
    // You may have to insert some WHERE clause to limit the list results
    return [Select FirstName, LastName, SmallPhotoUrl From User];
}
 
 
}
========================================
Kindly suggest how to develop this?

Regards,
Rahul