Think carefully, I want to change value of <input autocomplete="off" type="hidden" value="32.22394265092475" name="design[mockup_config_case_attributes][position_top]" id="design_mockup_config_case_attributes_position_top"> this element to 40 using js. I want a human like interaction otherwise it won't register in the website. give me best short, and robust way to do it.

here is more code for refrence.
<div class="canvas-container x case current-canvas" data-activecanvas="true" data-canvas="case" data-canvas_id="9">
<div class="editor-container phone centered">
<input autocomplete="off" type="hidden" value="34.47005147402902" name="design[mockup_config_case_attributes][position_top]" id="design_mockup_config_case_attributes_position_top" data-gtm-form-interact-field-id="3">
<input autocomplete="off" type="hidden" value="12.775304592314896" name="design[mockup_config_case_attributes][position_left]" id="design_mockup_config_case_attributes_position_left">
<input class="rotation" autocomplete="off" type="hidden" value="0" name="design[mockup_config_case_attributes][rotation]" id="design_mockup_config_case_attributes_rotation">
<div class="mockup-container active">
<div class="mockup-display-preview">
<div class="mockup-boundaries case" style="background-color: rgb(0, 0, 0);">
<img class="mutable-preview ui-draggable ui-draggable-handle rotate_0" src="https://res.cloudinary.com/teepublic/image/private/s--eoaUDnOl--/l_text:helvetica_16_bold:134de18e2ab48975a040d1a7b6fd7b0f19ccead7,o_0/c_fit,f_png,h_500,q_90,w_500/v1728377449/production/designs/67019077_0.png" style="width: 160.05px; height: 151.95px; top: 147.325px; left: 27.2625px;">
<div class="m-uploader_center-axis vertical" style="display: none;"></div>
<div class="m-uploader_center-axis horizontal" style="display: none;"></div>
</div>
</div>
</div>
<div class="m-uploader-toolbar jsUploaderCaseToolbar">
<div class="m-uploader-toolbar_tools">
<div class="m-uploader-toolbar_label">
Tools
</div>
<div class="m-uploader-toolbar_color-selector">
<div class="minicolors minicolors-theme-default minicolors-position-bottom minicolors-position-left"><input class="jsUploaderCaseColor jsUploaderColor minicolors-input" type="text" value="" name="design[mockup_config_case_attributes][bg_color]" id="design_mockup_config_case_attributes_bg_color" size="7"><span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color" style="background-color: rgb(0, 0, 0);"></span></span><div class="minicolors-panel minicolors-slider-hue"><div class="minicolors-slider minicolors-sprite"><div class="minicolors-picker" style="top: 0px;"></div></div><div class="minicolors-opacity-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-grid minicolors-sprite" style="background-color: rgb(255, 0, 0);"><div class="minicolors-grid-inner"></div><div class="minicolors-picker" style="top: 150px; left: 0px;"><div></div></div></div></div></div>
</div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-dropper jsOpenColorDropper" data-label="Cases" data-selector="#design_mockup_config_case_attributes_bg_color" title="Color Dropper"></div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-h-align jsUploaderCaseHAlign" title="Center Horizontally"></div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-v-align jsUploaderCaseVAlign" title="Center Vertically"></div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-rotate jsUploaderCaseRotate" title="Rotate"></div>
</div>
<div class="m-uploader-toolbar_scaler">
<div class="m-uploader-toolbar_label">
Scale
</div>
<div class="m-uploader-toolbar_scaler-input">
<input min="0" max="300" step="1" class="jsUploaderCaseScaler" type="range" value="75.0" name="design[mockup_config_case_attributes][image_size]" id="design_mockup_config_case_attributes_image_size">
</div>
<div class="m-uploader-toolbar_scaler-label jsUploaderCaseScalerLabel">75%</div>
</div>
</div>
</div>
</div>