LWC - wrapper object values are nullified on input tag value change - lwc

Question

I have a Apex method which returns the list of wrapper class as JSON string
having LWC js controller to call the method in connnectedCallback() and the wrapper list is assigned to a property this.coreAttributes which is show in html page using basic html tags along with other property defined in LWC noOfBlocks, faltHierarchy, and one more. code given below.
When I enter some value in coreAttribute's related input filed and enter some value in noOfBlocks input field, the value entered in the coreAttribute related fields are gone. please check the attached gif and help me to resolve this.
Image : https://easyupload.io/g1h772
#AuraEnabled(cacheable=true)
public static String queryCoreAttributes() {
List<Core_Attribute__c> coreAttributesList = new List<Core_Attribute__c>();
Map<Id,List<String>> picklistValuesToPicklistMasterMap = new Map<Id,List<String>>();
coreAttributesList = [SELECT Id, Name, Data_Type__c, Type__c, Picklist_Master__c
FROM Core_Attribute__c WHERE Base_Asset_Name__c IN (SELECT Id FROM Base_Asset_Template__c WHERE Name = 'Base PV Plant')
ORDER BY Name ASC];
picklistValuesToPicklistMasterMap = Utils.getPicklistValues();
System.debug(' picklistValuesToPicklistMasterMap '+ picklistValuesToPicklistMasterMap);
List<coreAttributesWrapper> coreAttributesWrapperList = new List<coreAttributesWrapper>();
for(Core_Attribute__c coreAttribute : coreAttributesList){
coreAttributesWrapper coreAttWrapper = new coreAttributesWrapper();
coreAttWrapper.attributeHeader = coreAttribute.Name;
coreAttWrapper.attributeDataType = coreAttribute.Data_Type__c.toLowerCase();
coreAttWrapper.picklistValues = (coreAttribute.Data_Type__c == 'Picklist') ? picklistValuesToPicklistMasterMap.get(coreAttribute.Picklist_Master__c): null;
coreAttWrapper.isPicklist = (coreAttribute.Data_Type__c == 'Picklist');
coreAttWrapper.attributeValue = '';
coreAttributesWrapperList.add(coreAttWrapper);
}
System.debug(' core Att '+ coreAttributesWrapperList);
return JSON.serialize(coreAttributesWrapperList);
}
JS
import { LightningElement, track, api } from "lwc";
import getPlantAssetRecord from "#salesforce/apex/P1PlantInfoPromptSolar.queryPlantAssetRecord";
import queryCoreAttributes from "#salesforce/apex/P1PlantInfoPromptSolar.queryCoreAttributes";
import saveP1PlantInfoPromptMetadata from "#salesforce/apex/P1PlantInfoPromptSolar.saveP1PlantInfoPromptMetadata";
export default class P1PlantInfoPromptSolar extends LightningElement {
#api plantAssetId='';
#track plantAssetDetail;
#track coreAttributes;
#track noOfBlocks='';
#track flatHierarchy=false;
#track drivePlus=false;
#track promptSpecificAttributes;
connectedCallback() {
console.log(' connected callback ');
getPlantAssetRecord({
recordId: 'a060p000001hGLxAAM',
})
.then(result => {
this.plantAssetDetail = result;
})
.catch(error => {
this.error = error;
});
queryCoreAttributes()
.then(result => {
console.log(' result ' + result);
console.log(' JSON result ' + JSON.parse(result));
this.coreAttributes = JSON.parse(result);
})
.catch(error => {
this.error = error;
});
}
inputTagValueChangeHandler(event){
console.log(' test '+ JSON.stringify(this.coreAttributes));
console.log(' value -> '+ event.target.value + ' name -> ' + event.target.name);
if(event.target.name === 'Blocks') this.noOfBlocks = event.target.value;
if(event.target.name === 'Flat Hierarchy') this.flatHierarchy = event.target.value;
if(event.target.name === 'Drive+') this.drivePlus = event.target.value;
}
HTML
<tr data-row="1">
<th># Blocks</th>
<td><input type="number" name="Blocks"
value={noOfBlocks} onchange={inputTagValueChangeHandler}/></td>
</tr>
<tr data-row="2">
<th>Flat Hierarchy</th>
<td><input type="checkbox" name="Flat Hierarchy"
value={flatHierarchy} onchange={inputTagValueChangeHandler}/></td>
</tr>
<tr data-row="2">
<th>Drive+</th>
<td><input type="checkbox" name="Drive+"
value={drivePlus} onchange={inputTagValueChangeHandler}/></td>
</tr>
<template for:each={coreAttributes} for:item="coreAttribute">
<tr key={coreAttribute.key}>
<th>{coreAttribute.attributeHeader}</th>
<td>
<template if:false={coreAttribute.isPicklist}>
<input type={coreAttribute.attributeDataType} name={coreAttribute.attributeHeader}
value={coreAttribute.attributeValue}/>
</template>
<template if:true={coreAttribute.isPicklist}>
<select size="1" name={coreAttribute.attributeHeader}>
<option value="None">--None--</option>
<template for:each={coreAttribute.picklistValues} for:item="attributePickValues">
<option key={coreAttribute.key} value={coreAttribute.attributeValue}>{attributePickValues}</option>
</template>
</select>
</template>
</td>
</tr>
</template>