JSFiddle - React, Tailwind, and code Playground

by Tech Savant

HTML

<table class="table" id="requestTable">
    <thead>
        <tr>
            <th>
                Start Date
            </th>
            <th>
                End Date
            </th>
            <th>
                Approved
            </th>
            <th>
                Employee
            </th>      
            <th>
                Position
            </th>                  
            <th class="no-sort">

            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>

            <tr>
             

                 <td>                    
                        <button class="btn btn-primary accept-button" data-id="5">Accept </button>                  

                                                      
                </td>
                
                 <td>                    
                        <button class="btn btn-primary accept-button" data-id="10">Accept </button>                  

                                                      
                </td>
                
                
                 <td>                    
                        <button class="btn btn-primary accept-button" data-id="15">Accept </button>                  

                                                      
                </td>
                
            </tr>

    </tbody>
</table>

CSS

input {
    border: none;
}
.editButton {
    border: solid 1px #000;
}

JavaScript

(function($){

    $(function(){  //document.ready

        
        $.each($('button.accept-button'), function(i,v) {
        

           //run your checks and set the button to decline if need be...
            var thisid = $(this).data('id');
            if (thisid == '10') {
       
                  $(this).html('Decline');
                  $(this).addClass('decline');
            }
        });
        
        $('button').on('click', function() {
            
            if ($(this).hasClass('decline')) {
               $(this).removeClass('decline');
               $(this).html('Accept');
            } else {
               $(this).addClass('decline');
               $(this).html('Decline');
            }
           
            
            
        });

  });
       
    })(jQuery);