pass html_option for using user time_zone or browser time_zone

bullet_train/app/views/account/onboarding/user_details/edit.html.erb

@@ -30,7 +30,8 @@
           <div class="sm:col-span-2">
             <%= render 'shared/fields/super_select', form: f, method: :time_zone,
               choices: time_zone_options_for_select(@user.time_zone, nil, ActiveSupport::TimeZone),
-              other_options: {search: true, required: true} %>
+              other_options: {search: true, required: true},
+              html_options: {use_browser_time_zone: true} %>
           </div>
         </div>
 
@@ -60,14 +61,18 @@
     // figure out the rails timezone value.
     var railsValue = jsTimezoneMapping[jstz.determine().name()];
 
-    // set the form accordingly.
-    var $option = $("#user_time_zone option[value=\"" + railsValue + "\"]")
-    $option.prop('selected', true);
+    var useBrowserTimeZone = $("#user_time_zone").attr('use_browser_time_zone');
 
-    // update the select2 as well. is there a better way to handle this?
-    // why don't _they_ handle this for us?
-    $("#select2-user_time_zone-container").attr('title', $option.text());
-    $("#select2-user_time_zone-container").text($option.text());
+    if (useBrowserTimeZone == "true") {
+      // set the form accordingly.
+      var $option = $("#user_time_zone option[value=\"" + railsValue + "\"]")
+      $option.prop('selected', true);
+
+      // update the select2 as well. is there a better way to handle this?
+      // why don't _they_ handle this for us?
+      $("#select2-user_time_zone-container").attr('title', $option.text());
+      $("#select2-user_time_zone-container").text($option.text());
+    }
 
   });
 </script>