如何在重复的输入类型文本中添加金额并显示添加金额

Question

I am trying to add duplicate amount value and display output in input text( get_amount ) which is when one clicks addmilistone button. For example; When a user click add button, the field duplicates, and when the user enters the amount on both inputs its add and displays in input type text.

Html The code below is being duplicate when the user clicks +addmilistone

<div id="fieldset"  class="row">
 <div class="modal-body">
    <input type="button" class="btn btn-primary" id="addmilistone" value="+addmilistone"/>

      <div id="fieldset"  class="row">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="m_description">Description</label>
          <input type="text" name="m_description" id="m_description" placeholder="milestone Description" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="ddate">Due Date</label>
          <input type="date" name="ddate" id="ddate" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="amount">Amount</label>
          <input type="text"  id="i_amount"  class="form-control">
        </div>
      </div>
    </div>
  </div>
</div>

Display Input type The code is where the calculation is being displayed when one input amount in input type id="i_amount" , that wether in a single row of inputs or duplicates.

  <input type="number" id="get_amount" class="form-control" name="">

Scripts

This script is duplicating the row of inputs

<script type="text/javascript">
  (function(){
    
    var button = document.getElementById("addmilistone");
    
    button.addEventListener("click", function() {
        var sourceNode = document.getElementById("fieldset");
        var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]);
        
        sourceNode.parentNode.appendChild(node);
    }, false);

    
    var counter = 0;
    function duplicateNode(/*DOMNode*/sourceNode, /*Array*/attributesToBump) {
        counter++;
        var out = sourceNode.cloneNode(true);
        if (out.hasAttribute("id")) { out["id"] = bump(out["id"]); }
        var nodes = out.getElementsByTagName("*");
        
        for (var i = 0, len1 = nodes.length; i < len1; i++) {
            var node = nodes[i];
            for (var j = 0, len2 = attributesToBump.length; j < len2; j++) {
                var attribute = attributesToBump[j];
                if (node.hasAttribute(attribute)) {
                    node[attribute] = bump(node[attribute]);
                }
            }
        }
        
        function bump(/*String*/str) {
            return str + "_" + counter;
        }
      
        return out;
    }

})();

</script>
<script>
$('#i_amount').keyup(function(){
    $('#get_amount').val(this.value);
});
</script>

Answer 1

Do the calculation after the input is outof focus.. In your code u was just selecting the first input

Code

 (function () { var button = document.getElementById("addmilistone"); button.addEventListener("click", function () { var sourceNode = document.getElementById("fieldset"); var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]); sourceNode.parentNode.appendChild(node); }, false); var counter = 0; function duplicateNode( /*DOMNode*/ sourceNode, /*Array*/ attributesToBump) { counter++; var out = sourceNode.cloneNode(true); if (out.hasAttribute("id")) { out["id"] = bump(out["id"]); } var nodes = out.getElementsByTagName("*"); for (var i = 0, len1 = nodes.length; i < len1; i++) { var node = nodes[i]; for (var j = 0, len2 = attributesToBump.length; j < len2; j++) { var attribute = attributesToBump[j]; if (node.hasAttribute(attribute)) { node[attribute] = bump(node[attribute]); } } } function bump( /*String*/ str) { return str + "_" + counter; } return out; } })(); $('#get_amount').val(0) $('body').on('focusout','[id^="i_amount"]',function () { var sum = Number($('#get_amount').val()); sum += Number($(this).val()); $('#get_amount').val(sum); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="row col-12"> <input type="button" class="btn btn-primary" id="addmilistone" value="+addmilistone" /> </div> <div id="fieldset" class="row"> <div class=" col-sm-4 "> <div class="form-group"> <label for="m_description">Description</label> <input type="text" name="m_description" id="m_description" placeholder="milestone Description" class="form-control"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="ddate">Due Date</label> <input type="date" name="ddate" id="ddate" class="form-control"> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label for="amount">Amount</label> <input type="text" id="i_amount" class="form-control amount"> </div> </div> </div> </div> <div class="row"> <input type="number" id="get_amount" class="form-control" name=""> </div> </div> </div>