title: Get value of input inside first sibling <td> from dynamically created objects
body: <p>I created objects from json:</p>
  
  <pre><code>var url = "&lt;?php echo base_url('dashboard/admin/getPropertyList');?&gt;";
  $.getJSON(url, function(data) {
  if(data === false) {
    var msg = 'No result';
    $('#table-panel-body').html(msg);
  }else {
      var table_body = '&lt;table id="property-table" class="table table-hover"&gt;' +
      '&lt;thead&gt;&lt;tr&gt;' +
      '&lt;th&gt;' + "&lt;?php echo nbs();?&gt;" + '&lt;/th&gt;' +
      '&lt;th&gt;Model Name&lt;/th&gt;' +
      '&lt;th&gt;Bed&lt;/th&gt;' +
      '&lt;th&gt;Bath&lt;/th&gt;' +
      '&lt;th&gt;Floor&lt;/th&gt;' +
      '&lt;th&gt;Lot&lt;/th&gt;' +
      '&lt;th&gt;Price&lt;/th&gt;' +
      '&lt;th&gt;Type&lt;/th&gt;' +
      '&lt;th&gt;Modified&lt;/th&gt;' +
      '&lt;th&gt;' + "&lt;?php echo nbs();?&gt;" + '&lt;/th&gt;' +
      '&lt;/tr&gt;&lt;/thead&gt;' +
      '&lt;tbody id="property-list"&gt;&lt;/tbody&gt;' +
      '&lt;/table&gt;';
    $('#table-panel-body').after(table_body);
    $.each(data, function(key, value) {
      var checkbox = '&lt;tr&gt;&lt;td&gt;&lt;input class="checkbox" type="checkbox" value="',
        td = '&lt;/td&gt;&lt;td&gt;',
        td_buttons = 
        '&lt;button class="btn btn-warning edit" data-target="#edit-modal" data-toggle="modal" data-id="edit"&gt;' + 
        '&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;' + 
        '&lt;/button&gt;' + 
        "&lt;?php echo nbs();?&gt;" +
        '&lt;button class="btn btn-info" data-target="#add-slide" data-toggle="modal" data-id="slide"&gt;' + 
        '&lt;span class="glyphicon glyphicon-picture"&gt;&lt;/span&gt;' + 
        '&lt;/button&gt;' + 
        "&lt;?php echo nbs();?&gt;" +
        '&lt;button class="btn btn-primary" data-target="#add-tags" data-toggle="modal" data-id="tags"&gt;' + 
        '&lt;span class="glyphicon glyphicon-tags"&gt;&lt;/span&gt;' + 
        '&lt;/button&gt;' + 
        '&lt;/td&gt;&lt;/tr&gt;';
      $( 
        checkbox + value.p_id + '"/&gt;' + td +
        value.model_name + td +
        value.bed + td +
        value.bath + td +
        value.floor + td +
        value.lot + td +
        value.min_price + td +
        value.property_type + td +
        value.modified + td +
        td_buttons).appendTo('#property-list');
        });
      }
  }); // End list populate properties
  </code></pre>
  
  <p>Now I would like to get the value of the <code>input</code> from the first <code>td</code> when I clicked a <code>button</code> from the last <code>td</code> using the following:</p>
  
  <pre><code>// I wrapped the table in an id because I think it's more efficient
  $('#main-panel').on('click', 'button[data-id="edit"]', function() {
  var inputValue = $(this).siblings('td').find('input.checkbox').val();
  console.log(inputValue);
  });
  </code></pre>
  
  <p>What am I doing wrong? <a href="http://tinypic.com/r/2qsugdi/8" rel="nofollow">Here</a> is how it looks like.</p>