JSFiddle - React, Tailwind, and code Playground

HTML

<button class="mybutton" style="display:none;">button1</button>
<button class="mybutton" style="display:none;">button2</button>
<button class="mybutton" style="display:none;">button3</button>
<button class="mybutton" style="display:none;">button4</button>

JavaScript

var greatestWidth = 0;   // Stores the greatest width
         $(".mybutton").each(function() {    // Select the elements you're comparing

             // Grab the current width
             var tmpbtn = $(this).clone().appendTo( "body" ).css({'display':'none', 'visibility': 'hidden'});
             var theWidth = tmpbtn.width();
             tmpbtn.remove();
             console.log(theWidth); //this is for checking
             if( theWidth > greatestWidth) {   // If theWidth > the greatestWidth so far,
                 greatestWidth = theWidth;     //    set greatestWidth to theWidth
             }
         });
            //show elements only afer calculating their maxwidth