How to add element when change again again and again

Question

I use display:none and .show() to do this. But I want to use .append() When change first element, second element appended and when change second element third element appended ...

http://jsfiddle.net/xtb51wed/659/

$('#sel1').change(function() {
    $('#sel2').show();
});
$('#sel2').change(function() {
    $('#sel3').show();
});
$('#sel3').change(function() {
    $('#sel4').show();
});
$('#sel4').change(function() {
    $('#sel5').show();
});

Clone the current element and append the clone to the containing DIV. And don't use IDs, use classes, because otherwise you'll end up with duplicates. — Barmar, Dec 18 '15 at 18:23
If you want to use .append() you don't want to include the options in the original html. See http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery for a possible solution. — John Hascall, Dec 18 '15 at 18:27

Ibrahim Khan · Accepted Answer · 2015-12-18T18:54:33.603

On change of dropdown value if it is the last dropdown clone the closest tr and append to the table. Since dropdowns are dynamically generated use event delegation.

$(document).on('change','.sel',function() {
    if($(this).closest('tr').next('tr').length==0){
        var newTr = $(this).closest('tr').clone();
        $('table').append(newTr);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class='sel'>
          <option value='1'>value1</option>
          <option value='2'>value2</option>
          <option value='3'>value3</option>
          <option value='4'>value4</option>
          <option value='5'>value5</option>
      </select>
   </td>
 </tr>
</table>

How to add element when change again again and again

1 Answers1