title: Creating new entry in array when updating existing value in dynamic textbox
body: <p>I have an array in which my Source and Destination are like this:</p>
  
  <pre><code>markers.push({
      "Location": "Chicago",
      "IsLocation": "Yes"
  });
  
  markers.push({
      "Location": "Los Angeles",
      "IsLocation": "Yes"
  });
  </code></pre>
  
  <p>Now when i will create points with my dynamic textbox then I would like to add those all points in between source and destination.</p>
  
  <p>Scenario 1: first dynamic textbox with input say for Eg: <code>abc</code></p>
  
  <pre><code>markers[0]:Chicago
  markers[1]:abc
  marker[2]:Los Angeles.
  </code></pre>
  
  <p>Scenario 2: second dynamic textbox with input say for Eg: <code>pqr</code></p>
  
  <pre><code>markers[0]:Chicago
  markers[1]:abc
  markers[2]:pqr
  marker[3]:Los Angeles.
  </code></pre>
  
  <p>Now when I change the second textbox value that is from <code>pqr</code> to <code>lmn</code> then it creates a new entry in markers array instead of updating <code>pqr</code> to <code>lmn</code>.</p>
  
  <p>You can check in console:</p>
  
  <p><a href="https://i.stack.imgur.com/J3t4u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J3t4u.png" alt="enter image description here"></a></p>
  
  <p>How do I stop that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here
  
  var cnt = 1;
  var maxNumberOfTextboxAllowed = 5;
  
  var autocomplete = [];
  var markers = [];
  
  markers.push({
    "Location": "Chicago",
    "IsLocation": "Yes"
  });
  
  markers.push({
    "Location": "Los Angeles",
    "IsLocation": "Yes"
  });
  
  function Generatetextbox() {
    if (cnt &lt;= maxNumberOfTextboxAllowed) {
      var fieldWrapper = $("&lt;div class='fieldwrapper' id='field" + cnt + "'/&gt;");
      var fName = $("&lt;input type='text' class='fieldname' id='Txtopt" + cnt + "'  name='TxtoptNm" + cnt + "'  /&gt;");
      fieldWrapper.append(fName);
      fieldWrapper.append('&lt;br /&gt;');
      fieldWrapper.append('&lt;br /&gt;');
      $("#abc").append(fieldWrapper);
      var newInput = [];
      var newEl = document.getElementById('Txtopt' + cnt);
      var txtboxId = 'Txtopt' + cnt;
      newInput.push(newEl);
      setupAutocomplete(autocomplete, newInput, 0, txtboxId);
      cnt = cnt + 1;
    } else
      alert("Cant create more than 5 textbox")
  }
  
  
  function setupAutocomplete(autocomplete, inputs, i, txtboxId) {
    autocomplete.push((txtboxId));
    var idx = autocomplete.length - 1;
    document.getElementById(autocomplete[idx]).addEventListener("change", function() {
      var autoTextbox = [{
        "Location": document.getElementById(autocomplete[idx]).value,
        "IsLocation": "Yes"
      }]
  
      var markerLastIndexData = [{
        "Location": markers[markers.length - 1].Location,
        "IsLocation": "Yes"
      }]
  
     markers.splice(markers.length - 1, 1, autoTextbox);
     markers.splice(markers.length, 0, markerLastIndexData);
     console.log(markers)
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="abc"&gt;&lt;/div&gt;
  &lt;button onclick="Generatetextbox()" class="btn btn-primary" type="button"&gt;Add&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>