I think very optimistically... I got a timezone to work on my app now. Huge thanks to all the comments from everyone above, without you guys, I will never found the best working solution for my situation with such minimum changes.

Front-end

First, I added 2 lines of code, I grab the client timezone

 const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; <<< ADDED : Line #1

Since I have already made an ajax on log pressed anyway, I just need to one more field to the server

var data    = {};
data.tz     = timezone; <<< ADDED : Line #2 

Back-end

Second, with 5 lines of code, I can access what I sent from FE like so to overwrite the created_at time.

$tz     = $inputs['tz']; <<< ADDED : Line #3 

$clientDate = new DateTime("now", new DateTimeZone($tz) ); <<< ADDED : Line #4 
$clientTimestamp = $clientDate->format('Y-m-d H:i:s'); <<< ADDED : Line #5 

$log             = new BabyLog;
$log->type       = $type;
$log->created_at = $clientTimestamp; <<< ADDED : Line #6 
$log->updated_at = $clientTimestamp; <<< ADDED : Line #7 
$log->save();

Now

My database stored the right timestamp() based on my client device/browser.

No other codes needed, it just works.

Test

I changed the Date & Time on my iPhone from Chicago to New York back and forth. I pressed log, it saved, and I noticed my front-end displayed the accurate time based on my client timezone now.

I hope

this post helps someone like me that wants to make their web-app work globally with minimal code changes. To be very specific in 7 lines of codes.