how to update combo box with respective textbox in js?

i'm trying to update combobox .if User enter the url on the text box. based on url i am fetching some information and pushing that data into combo box

code:

<body>
<div id="updatecmb">
<div class="Urlwithflds"><input type="text" class="Geturl" placeholder="Layer URL" onchange="Getfields()"><button class="rmvbtn">-</button><br><label for="FeaLayerflds">Select Fields</label><select class="Flds" name="FeaLayerflds"></select> </div>
<div class="Urlwithflds"><input type="text" class="Geturl" placeholder="Layer URL" onchange="Getfields()"><button class="rmvbtn">-</button><br><label for="FeaLayerflds">Select Fields</label><select class="Flds" name="FeaLayerflds"></select> </div>
<div class="Urlwithflds"><input type="text" class="Geturl" placeholder="Layer URL" onchange="Getfields()"><button class="rmvbtn">-</button><br><label for="FeaLayerflds">Select Fields</label><select class="Flds" name="FeaLayerflds"></select> </div>
</div>
<script>
function Getfields(events){
   var txturl=events.target.value;
    // i am fetching the details from url and it gives array
    cmbdata=[1,2,3,4,5,6,7,8];
    selele=events.currentTarget.children[0].children[4]
    cmbdata.forEach(function(entry) {
    selele.add(new Option(entry));
    }
</script>
<body>

my input count increases based on the urls then childs indexing also change how to update if user pasted on second text box only fill second select tag....

Solution

In the HTML, pass the function getFields with this as its argument like so

<div id="updatecmb">
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
</div>

Then in the function getFields we do

function getfields(target){
  const txturl = target.value;
  // assuming we fetched some data from given url as an array
  cmbdata = [1,2,3,4,5,6,7,8];

  // find the element 'select' within the parent element
  selele = target.parentElement.querySelector('select');

  // append each fetched data as new option
  cmbdata.forEach(function(entry) {
    selele.add(new Option(entry));
  });
}

Done!

Try it

function getfields(target){
  const txturl = target.value;
  // assuming we fetched some data from given url as an array
  cmbdata = [1,2,3,4,5,6,7,8];

  selele = target.parentElement.querySelector('select');

  cmbdata.forEach(function(entry) {
    selele.add(new Option(entry));
  });
}

body {
  background: white;
  color: #323232;

  margin: 0;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: Helvetica neue, roboto;
}

<div id="updatecmb">
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
</div>