jquery - Unable to get value from appended table td -

i having trouble getting input value of appended row using unique id numbers. returns undefined. when remove ''x'' id="aaa1'+x+'" able value when add x (used apply unique id) returns undefined. appreciated.

         // alert($('#a').val());       // alert($('#b').val());       // alert($('#c').val());       // alert($('#d').val());    var x=0;  $('#a1').click(function(){  	   $('#mytable1').append(  			'<tr><td><input class="form-control input-sm w3-input" id="aaa'+x+'" type="text"></td><td><input class="form-control input-sm w3-input" type="text" id="bbb'+x+'"></td><td><input class="form-control input-sm w3-input" id="ccc" type="text"></td><td><input class="form-control input-sm w3-input" id="ddd" type="text"></td></tr>'  			);  			x=x+1;      			alert($('#aaa'+x).val());  			alert($('#bbb'+x).val());  			alert($('#ccc'+x).val());  			alert($('#ddd'+x).val());  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>  <table class="table table-bordered customfields2" id="mytable1">    <tr>      <td><label class="w3-validate">components required</label></td>      <td><label class="w3-validate">description</label></td>      <td><label class="w3-validate">qty per</label></td>      <td><label class="w3-validate">total qty</label></td>    </tr>    <tr>          <td><input class="form-control input-sm w3-input" id="a" type="text" required></td>      <td><input class="form-control input-sm w3-input" id="b" type="text" required></td>      <td><input class="form-control input-sm w3-input" id="c" type="text" required></td>      <td><input class="form-control input-sm w3-input" id="d" type="text" required></td>    </tr>  </table>  <button id="a1" class="w3-btn w3-hover-cyan"><i class="fa fa-plus-circle"></i> add row</button><hr>

// alert($('#a').val());  // alert($('#b').val());  // alert($('#c').val());  // alert($('#d').val());    var x = 0;  $('#a1').click(function() {    $('#mytable1').append(      '<tr><td><input class="form-control input-sm w3-input" id="aaa1' + x + '" type="text" value="123"></td><td><input class="form-control input-sm w3-input" type="text" id="bbb' + x + '"></td><td><input class="form-control input-sm w3-input" id="ccc" type="text"></td><td><input class="form-control input-sm w3-input" id="ddd" type="text"></td></tr>'    );    x = x + 1;      alert($('#aaa' + x).length);    alert($('#bbb' + x).length);    alert($('#ccc' + x).length);    alert($('#ddd' + x).length);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>  <table class="table table-bordered customfields2" id="mytable1">    <tr>      <td>        <label class="w3-validate">components required</label>      </td>      <td>        <label class="w3-validate">description</label>      </td>      <td>        <label class="w3-validate">qty per</label>      </td>      <td>        <label class="w3-validate">total qty</label>      </td>    </tr>    <tr>      <td>        <input class="form-control input-sm w3-input" id="a" type="text" required>      </td>      <td>        <input class="form-control input-sm w3-input" id="b" type="text" required>      </td>      <td>        <input class="form-control input-sm w3-input" id="c" type="text" required>      </td>      <td>        <input class="form-control input-sm w3-input" id="d" type="text" required>      </td>    </tr>  </table>  <button id="a1" class="w3-btn w3-hover-cyan"><i class="fa fa-plus-circle"></i> add row</button>  <hr>

1. because input not exist during time if check length zero
2. also id wrong in append aaa1 in alert have aaa