JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" title="" id="test">Change headers and footer to the common ones</a>
<div class="page">
    <div class="header">header of the first page</div>
    <div class="content">some content about kittens</div>
    <div class="footer">footer of the page no. 1</div>
</div>
<div class="page">
    <div class="header">second header</div>
    <div class="content">oh my god, ponnies!</div>
    <div class="footer">some fancy footer about ponnies</div>
</div>

CSS

.page {
    border: 1px solid #aaa;
    margin: 5px;
    padding: 5px;
}

.header {
    background-color: red;
}
.content {
    background-color: green;
}
.footer {
    background-color: blue;
}

JavaScript

jQuery('#test').on('click', function(event){
    event.preventDefault();
    var $headers = jQuery('.header');
    var $footers = jQuery('.footer');
    $headers.html('SOME COMMON HEADER');
    $footers.html('SOME COMMON FOOTER');
});