Dynamically Created Div Change Drop Down options

Question

// function to add set of elements
var ed = 1;

function new_server() {
    ed++;
    var newDiv = $('#server div:first').clone();
    newDiv.attr('id', ed);
    var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete server ' + ed + ' </a>';
    newDiv.find('tr:first th').text('Server ' + ed);
    newDiv.find('select:first').attr('id', 'cat' + ed);
    newDiv.append(delLink);
    $('#server').append(newDiv);
    newDiv.find('input:text').val('');

    web = new Array('CF9', 'CF10', 'CF11', 'ASP.NET', 'PHP', 'CMS', 'JAVA');
    db = new Array('MSSQL Express', 'MSSQL Web', 'MSSQL Standard', 'MYSQL');
    app = new Array('IMIS', 'TERMINAL', 'AD');

    populateSelect();

    $(function() {

      $('#cat' + ed).change(function() {
        populateSelect();
      });
    });

    function populateSelect() {
      cat = $('#cat' + ed).val();
      $('#item').html('');

      if (cat == 'Web') {
        web.forEach(function(t) {
          $('#item').append('<option>' + t + '</option>');
        });
      }

      if (cat == 'DB') {
        db.forEach(function(t) {
          $('#item').append('<option>' + t + '</option>');
        });
      }

      if (cat == 'App') {
        app.forEach(function(t) {
          $('#item').append('<option>' + t + '</option>');
        });
      }
    }
    alert(ed);
  }
  // function to delete the newly added set of elements

function deled(eleId) {
  d = document;
  var ele = d.getElementById(eleId);
  var parentEle = d.getElementById('server');
  parentEle.removeChild(ele);
  //ed--;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="server">
  <div id="1">
    <table border="3">
      <tbody>
        <tr>
          <th colspan="4" style="background-color:#b0c4de;">Server 1</th>
        </tr>
        <br>
        <tr>
          <td>Technology
            <br>
            <select name="tech[]" id="cat1">
              <option value="">Select</option>
              <option value="Web">Web</option>
              <option value="DB">DB</option>
              <option value="App">App</option>
              <option value="O">Other</option>
            </select>
            <br>
            <select id="item" name="techtype[]">
            </select>
            <br>
          </td>
          <td>CPU?
            <input type="text" name="cpu[]">
            <br>
          </td>
          <td>Memory?
            <input type="text" name="memory[]">
            <br>
          </td>
          <td>Disk Space?
            <input type="text" name="space[]">
            <br>
          </td>
        </tr>
        <br><a class="btn btn-info" href="javascript:new_server()"> Add New Server </a>
        <br>
      </tbody>
    </table>
  </div>
</div>

I have a form as follows:

On page load I cannot update any of the select items.

If i add a new server It will then allow me to change the selects from the first,

If i create a third same result.

I think what is happening is my id's for the select are not changing an im not sure why, I put a JS alert at the bottom to verify that 'ed' is changing as it loops.

End result Im looking for it to be able to change the values of the select from the first and then when another server is added be able to change those select values with out changing any others and so on.

ANy help would be great.

Answer 1

You are using a counter to dynamically create ID's for your servers, so they look like $("#"+cat+counter).

Probleme is you also use your counter to impact lists in populateSelect(), that means you only modify list content of your last created server.

Here is a demo of what I understand of your projet, and a solution that I can give you.

Most changes are about this :

$(function () {
    $(document).on("change", '.cat', function () {
        populateSelect($(this).val, $(this).attr("id"));
    });
});

And this :

function populateSelect(listValue, listID) {

    var serverItem = $("#" + listID).closest(".tableServer").find('.item')
    cat = $("#" + listID).val();
    serverItem.html('');
    ...

---

• You can see that I changed id="item" for class="item" (this way, cloned servers won't duplicat id="item").
• I moved your arrays on top of your code to be reachable from every function
• I also moved your populateSelect function and $(function() { outside the new_server() function
• I added newDiv.find('.item').html(''); into new_server() function to not clone previously selected option.
• I added class="tableServer" to table wrapper in order to dynamically target them in populateSelect()