JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo" class="row collapse"> 
           <div class="small-5 columns"> 
            <label ficlabel="" class="inline CatalogueFont" id="dragField10" value="FICUW.clientcode.label" onclick="notused('10','PARTY',1)">Client</label> 
           </div> 
            
           <div class="small-7 columns"> 
            <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input id="valueDescFd10" style="padding-left:0px;" fictype="FICPicklist" pickdetails="PARTY:" pickdescdetails="" class="round ui-autocomplete-input" type="text" value="" placeholder="Description" autocomplete="off" name="policy[IUWP1_CLI_CD_DESC]"> 
           </div> 
          </div>

JavaScript

//var arrClasses = [];
$("#foo > div[class*='small-']").each(function(index){
    $(this).removeClass(function () {
    var className = this.className.match(/small-\d+/);
    if (className) {
        console.log(index);
       // arrClasses.push(className[0]);
        switch(index){
            case 0: 
                this.className='columns small-9';
                break;
            case 1:
                this.className='columns small-3';
                break;
          //  case 2:
               // this.className='columns small-8';
               // break;
        }
        
        return className;
        
    }
});
    });
//console.log(arrClasses);