How to apply to a shortcode to work after clicking on a button?

My question is that how is it possible to apply the shortcode after that when someone clilcked on the button

The button:

<button class="apply">Apply class</button>

The shortcode:

function color_shortcode( $atts, $content = null ) {
         return '<span class="color">' . $content . '</span>';
}
add_shortcode( 'color', 'color_shortcode' );

The usage:

[color]This is colored[/color]

The work:

<span class="color">This is colored</span>

So somebody click on the Apply class button and after that where

[color]This is colored[/color]

was/were defined then it will be like this:

<span class="color">This is colored</span>

If something is not understandable please write and I will make changes!

I would be happy if its possible to solve with only php and/or css but if not thats not a problem.

Thank you for your kind help!