使用JQuery更改動態添加的表單字段的輸入ID

Question

我正在構建一個報價工具，並且使用JQuery添加更多按鈕時單擊添加新表單字段，並且希望ID也可以更改以便我可以使用它在我的計算中，但ID不會改變。另外，我應該如何在計算中使用它，以便它還添加動態添加的表單字段。提前致謝。

HTML：

<div class="input_fields_wrap"> 
       <div class="empBlock3"> 
       <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" /> 
       <div class="slds-form-element__row" > 
        <div class="slds-form-element slds-size--1-of-4"> 
        <div class="status1" name="status1"><h2>Single</h2></div> 
        </div> 
        <div class="slds-form-element slds-size--1-of-4"> 
        <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" /> 
        </div> 
        <div class="slds-form-element slds-size--1-of-4"> 
        $ <input type="text" id="flex_2_single" name="amount1" class="slds-input" style="width:50%;" onchange="updateTable2();" /> 
        </div> 
       </div> 
       <div class="slds-form-element__row"> 
        <div class="slds-form-element slds-size--1-of-4"> 
        <div class="status2" name="status2"><h2>Family</h2></div> 
        </div> 
        <div class="slds-form-element slds-size--1-of-4"> 
        <input type="number" id="flex_2_family_num" class="slds-input" min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" /> 
        </div> 
        <div class="slds-form-element slds-size--1-of-4"> 
        $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" /> 
        </div> 
       </div> 
       <div class="slds-form-element__row"> 
        <div class="slds-form-element slds-size--1-of-4" name="ratio"> 
        Ratio: 
        <select> 
         <option value="1:1">1:1</option> 
         <option value="1:2" selected="">1:2</option> 
         <option value="1:3">1:3</option> 
        </select> 
        </div> 
       </div> 
       </div> 
      </div> 

JQuery的：

function addMoreRows3() { 
    empBlock3 ++; 

// Adding extra form fields 
    var recRow3 = '<div class="empBlock3'+empBlock3+'"> <br> <div class="empBlock3">\ 
    <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" />\ 
    <div class="slds-form-element__row" >\ 
    <div class="slds-form-element slds-size--1-of-4">\ 
     <div class="status1" name="status1"><h2>Single</h2></div>\ 
    </div>\ 
    <div class="slds-form-element slds-size--1-of-4">\ 
     <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" />\ 
    </div>\ 
    <div class="slds-form-element slds-size--1-of-4">\ 
     $ <input type="text" id="flex_2_single" name="amount1" class="slds-input" style="width:50%;" onchange="updateTable2();" />\ 
    </div>\ 
    </div>\ 
    <div class="slds-form-element__row">\ 
    <div class="slds-form-element slds-size--1-of-4">\ 
     <div class="status2" name="status2"><h2>Family</h2></div>\ 
    </div>\ 
    <div class="slds-form-element slds-size--1-of-4">\ 
     <input type="number" id="flex_2_family_num" class="slds-input" min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" />\ 
    </div>\ 
    <div class="slds-form-element slds-size--1-of-4">\ 
     $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" />\ 
    </div>\ 
    </div>\ 
    <div class="slds-form-element__row">\ 
    <div class="slds-form-element slds-size--1-of-4" name="ratio">\ 
     Ratio:\ 
     <select>\ 
     <option value="1:1">1:1</option>\ 
     <option value="1:2" selected="">1:2</option>\ 
     <option value="1:3">1:3</option>\ 
     </select>\ 
      </div>\ 
     </div><a href="javascript:void(0);" onclick="removeRow3('+empBlock3+');">Delete</a></div></div>'; 
    $('#addedRows3').append(recRow3); 
    }; 

    function removeRow3(removeNum3) { 
    $('.empBlock3'+removeNum3).remove(); 
    }; 

計算報價工具：

function updateTable2() { 
    // this updates the table as the values are being filled out 
       // get the variables for the first Job Description (hsa_1) 
       var flex1_Name = document.getElementById('flex_1').value; 
       var flex1_Single_Num = document.getElementById('flex_1_single_num').value; 
      var flex1_Single_Limit = document.getElementById('flex_1_single').value; 
       var flex1_Family_Num = document.getElementById('flex_1_family_num').value; 
      var flex1_Family_Limit = document.getElementById('flex_1_family').value; 

       // get the variables for the second Job Description (hsa_2) 
       var flex2_Name = document.getElementById('flex_2').value; 
       var flex2_Single_Num = document.getElementById('flex_2_single_num').value; 
      var flex2_Single_Limit = document.getElementById('flex_2_single').value; 
       var flex2_Family_Num = document.getElementById('flex_2_family_num').value; 
      var flex2_Family_Limit = document.getElementById('flex_2_family').value; 

       var totalSingle = (flex1_Single_Limit * flex1_Single_Num)+(flex2_Single_Limit * flex2_Single_Num); 
       var totalFamily = (flex1_Family_Limit * flex1_Family_Num)+(flex2_Family_Limit * flex2_Family_Num); 
       var totalCost = totalSingle+totalFamily; 

       var flexCostTMP=document.getElementById('iFlexfee'); 
       var flexCost=flexCostTMP.options[flexCostTMP.selectedIndex].value; 


       // update the table values 
       document.getElementById('iF1C0').innerHTML=parseInt((totalSingle)*.4); 
       document.getElementById('iF1C1').innerHTML=parseInt((totalSingle)*.65); 
       document.getElementById('iF1C2').innerHTML=parseInt((totalSingle)*.8); 
       document.getElementById('iF1C3').innerHTML=parseInt((totalSingle)*1); 

       document.getElementById('iF2C0').innerHTML=parseInt((totalFamily)*.4); 
       document.getElementById('iF2C1').innerHTML=parseInt((totalFamily)*.65); 
       document.getElementById('iF2C2').innerHTML=parseInt((totalFamily)*.8); 
       document.getElementById('iF2C3').innerHTML=parseInt((totalFamily)*1); 

       document.getElementById('iF5C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost); 
       document.getElementById('iF5C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost); 
       document.getElementById('iF5C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost); 
       document.getElementById('iF5C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost); 
       document.getElementById('iF6C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost) +parseInt(totalFamily*.4) + parseInt(totalSingle*.4); 
       document.getElementById('iF6C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost) +parseInt(totalFamily*.65) + parseInt(totalSingle*.65); 
       document.getElementById('iF6C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost) +parseInt(totalFamily*.8) + parseInt(totalSingle*.8); 
       document.getElementById('iF6C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost) +parseInt(totalFamily*1) + parseInt(totalSingle*1); 
      } 

Answer 1

更改的項目屬性，它是在你的情況ID此行可能會有所幫助：

var NewIdValue = "Somthing" ; 
$('#OldIdValue').attr('id') = NewIdValue;