Hide Fields (columns) from SharePoint List Forms based on Permission (Groups) using JSOM

Context: Customer wants to hide some fields on the new (NewForm.aspx), edit (EditForm.aspx) and display (DispForm.aspx) forms of the SharePoint list from the members based on their permissions.

Solution: Since the customer is using SharePoint online site, I wrote a small JSOM script to fulfill their requirements. I placed the name of the site groups along with the fields in a hash table (array). In this way, I knew which fields I need to hide from the members of group. Furthermore, if a user belongs to two groups then permissions from the group with higher permissions should apply to the user. So, i placed the groups in a separate array which means that one can find group with hishest permssion at index 0.

The following lines of code that I wrote and then later added a Script Editor Webpart and placed the code in it;

Note: The above code will work on DispForm.aspx. But, if you want to make it work for edit or new forms then you have to find the html controls on the forms. For instance; for edit form, you have to make changes in the hideHtmlElements function as shown below and rest of the code will work for edit form;

function hideHtmlElements(elementsArray)
{
     $(elementsArray).each(function(index, value){
         if(value != "")
         {
       var elementFound = $("nobr:contains(" + value + ")");
       var parentTr = elementFound.closest("tr");
       parentTr.hide();
         }
     });  
}