anchor.diff:                                          class="form-control"></td>
                                       <td><input type="button"
                                           id="serviceSearch"
  -                                        value="search" class="button"
  -                                        class="btn btn-primary" /> <img
  +                                        value="search" 
  +                                        class="btn btn-primary btn-sm" /> <img
                                           alt="" id="loadingDiv"
                                           width="16px" height="16px"
                                           src="${pageContext.servletContext.contextPath}/resources/img/ajax_process_16x16.gif"
                                           class="none"></td>
  +                                    <td><div id="serviceTermError" style="color: red"></div></td>
                                   </tr>
                               </table>
                           </td>
  
positive.code:     function showFormProcessing() {
          $('#loadingDiv').show();
      }
  </script>
  
  <table style="padding: 0px;">
  
negative.code:     //service 
      $(function() {
          $("#serviceSearch").click(function() {
              getTermDetails();
          });
      });
      
      function getTermDetails() {
  
          var serviceterm = $("#serviceterm").val();
          // Added validation for search term
          if(!serviceterm.trim()) {
              $("#serviceTermError").html('Term cannot be empty.');
              return false;
          } else {
              $("#serviceTermError").html('');
          }
          var serviceid = $("#selectedServiceNameIdMap").val();
          $.ajax({
              type : "GET",
              url : "${pageContext.servletContext.contextPath}/serviceSearch",
              data : {
                  serviceterm : serviceterm,
                  serviceid : serviceid
              },
              success : function(response) {
                  if (response.length > 0 && response != "[]") {
                      var data = jQuery.parseJSON(response);
                      $('#serviceResultTable').dataTable().fnClearTable();
                      $('#serviceResultTable').dataTable().fnAddData(data);
                      $('#showServiceResult').show();
                  } else {
                      $('#serviceResultTable').dataTable().fnClearTable();
                      $('#serviceResultTable').parents('div.dataTables_wrapper').first().hide();
                      $('#showServiceResult').hide();
                      $("#serviceTermError").html('No results found.');
                  }
              },
              error : function(response) {
                  $('#serviceResultTable').dataTable().fnClearTable();
                  $('#serviceResultTable').parents('div.dataTables_wrapper').first().hide();
                  $('#showServiceResult').hide();
                  $("#serviceTermError").html('An error occurred. Please try again later.');
              }
          });
      }
      
      $(function() {
          $("#showServiceResult").click(function() {
              $('#serviceResult').toggle();
  