关闭后重开Modal时Treated Area值未重置的技术问题

我有一个如下的Bootstrap Modal组件，输入值后点击Cancel按钮关闭弹窗，再次打开时Treated Area的值不会重置。注意：示例代码运行完全正常，但在包含其他业务逻辑的实际项目中，打开对话框时该值无法重置，不过按下Tab键或输入新值后会更新。我尝试复现问题，但下方的示例代码表现符合预期。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
</script>

<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
 });
});
function calculateQtyAndCost(){
var treatPerc = $('#selEditProjectCaseMaintenanceRemovalProcessTreatPerct').val();

if (treatPerc != '') {

    var projectCaseId = 642;
        
            var treatedArea = parseFloat(3500 * treatPerc / 100);
            //treatment area percentage calculation
            $('#selEditProjectCaseMaintenanceRemovalProcessTreatArea').val(treatedArea);
    }
    else {
    $('#selEditProjectCaseMaintenanceRemovalProcessTreatArea').val(0);
 }
 console.log($('#selEditProjectCaseMaintenanceRemovalProcessTreatArea').val());
 }

function OpenEditProjectCaseMaintenanceConstructionEquipmentHours(){
$('#selEditProjectCaseMaintenanceRemovalProcessTreatPerct').val('');
    //$('#selEditProjectCaseMaintenanceRemovalProcessTreatArea').val('');
    calculateQtyAndCost();
    
  $('#edit-pavement-maintenance-removal-process-dialog').modal({ backdrop: 'static' }, 'show');

}
</script>
</head>
<body>
 <div class="modal" id="edit-pavement-maintenance-removal-process-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 440px">
    <div class="modal-content">
        <div class="modal-header">
            <span id="spnEditProjectCaseMaintenanceRemovalProcessTitle"></span>
        </div>
        <div class="modal-body">
            <form action="" id="edit-pavement-maintenance-removal-process-dialog-form" class="needs-validation" novalidate>
                <div class="row">
                <p><b>Total Area: 3500m²</b></p>

 <div class="col-6">
                        <div class="form-group">
                            <label>Treatment Area:</label> <span style="margin-left: 5px" class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" data-html="true" title='Treatment area percentage'></span>
                            <div class="input-group suffix">
                                <input id="selEditProjectCaseMaintenanceRemovalProcessTreatPerct" class="clsDec2 form-control" type="text" required onblur="calculateQtyAndCost();"/>
                                <span class="input-group-addon suffix"> %</span>
                            </div>
                        </div>
                    </div>
                    <!--start of new code-->
                    <div class="col-6">
                        <div class="form-group">
                            <label>Treated Area:</label> <span style="margin-left: 5px" class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" data-html="true" title='Area to be worked on is calculated based on the percentage in Treatment Area'></span>
                            <div class="input-group suffix">
                                <input id="selEditProjectCaseMaintenanceRemovalProcessTreatArea" class="clsInt form-control" type="text" disabled/>
                                <span class="input-group-addon suffix"> m²</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        
                        <div class="form-group">
                            <div>
                                <div class="float-left">
                                    <label for="selEditProjectCaseMaintenanceRemovalProcessType">Attribute Removal Process:</label>
                                </div>
                                <div class="float-right">
                                    <a href="#" onclick="OpenEditRemovalProcess(-1); return false"><span class="fa fa-plus"></span> Custom Process</a>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            
                            <p id="pEditProjectCaseMaintenanceRemovalProcessType" style="margin: 10px 0"></p>
                        </div>
                    </div>
                          
                  
                      
                </div>
                <div id="divEditProjectCaseMaintenanceRemovalProcessError" class="clsDialogError" style="color: #F00"></div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-ok">Save</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<div style="margin: 20px 0 0 10px; font-size: 20px">
                                            <button class="btn btn-success btn-ok" onclick="OpenEditProjectCaseMaintenanceConstructionEquipmentHours()"><span class="fa fa-plus"></span> Add Construction Equipment Hours</button>
                                        </div>
                                        

</body>
</html>

实际场景下重新打开弹窗后，Treated Area仍保留之前的值，界面如下：

内容的提问来源于stack exchange，提问作者Samra