Webpack Hot Module Replacement duplicate entry after update

Question

I have an issue with the Hot Module Replacement when I update the script from <h1>jQuery Works!</h1> to <h1>jQuery Works2!</h1>, save the file & tried to click a button to insert an element in the DOM it retains the first element when using Hot Module Replacement. This should replace the old element to new element. I'm not yet sure if I've miss anything else. Please see my codes below.

app.js

(function(){
    "use strict";

    $(".btn-primary").on("click", function(e){
        e.preventDefault();

        $('.site-main').append('<h2>jQuery Works!</h2>');
    });
    
})();

if(module.hot) module.hot.accept();

webpack.dev.js

const path = require("path");
const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const projDir = "./project/";
const distDir = "./dist/";
const pubDistDir = "http://localhost:3000/dist";

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: path.resolve(__dirname, projDir),
    writeToDisk: true,
    compress: true,
    hotOnly: true,
    headers: { 'Access-Control-Allow-Origin': '*' }
  },
  devtool: 'inline-source-map',
  output: {
    publicPath: pubDistDir,
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, distDir),
    hotUpdateChunkFilename: 'hot-update.js',
    hotUpdateMainFilename: 'hot-update.json',
  },
  optimization: {
    namedModules: true
  },
  plugins: [
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost',
        files: [
          "./${projDir}/**/*.php",
        ],[enter image description here][1]
        notify: false,
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false,
      }
      ),
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader", // 4th inject styles into DOM
          "css-loader", // 3rd turns css into commonjs
          {
              loader: 'postcss-loader',
              options: {
                  postcssOptions: {
                      plugins: [
                          'autoprefixer' // 2nd turns CSS and add vendor prefixes to CSS rules 
                      ],
                  }
              }
          },
          "sass-loader", // 1st turns sass into css
        ],
      },
    ],
  },
});

PREVIEW