How to deal with client side javascript in role based web applications

Let's say I am building a web application where there are 2 different types of user roles. There is one common page on which both roles can perform some actions. Some of the actions are common among both roles, but some actions are restricted to a specific role. The page is rendered on server side, and I am adjusting the html output according to the user's role. For instance, I am first checking if the user has Admin role and then render an Edit button, otherwise I do not render the button.

I wonder how I should deal with javascript that will run on the page. I need to register an event handler for the Edit button, but this should only happen if the user is Admin: there won't even be an edit button if the user is not admin.

The first solution that comes into my mind is to separate javascript files according to user roles: one script for admin user and another script for non-admin users. Both scripts will contain quite a deal of common code so I am not sure if that will be the best approach. I do not want to copy paste the common code in both scripts. Not sure if some js bundler would solve my problem. I am open to suggestions.

The second solution is deploying just one javascript file for both roles. While registering event handler to the Edit button, I will have to check if the button exists in the first place. The explicit checks can be avoided to some extent via JQuery.

I would like to hear some advice on which solution I should prefer.