dynamically adding items to table, want to select checked checkboxes and move

Question

I am creating a basic to do app using jQuery and Bootstrap. This is the current code that I have written. I have been successful in dynamically adding user input into the "To Do" section with the following jQuery:

    let toDoArr = [];
    
    $('#addItemBtn').click(() => {
     let item = $('#searchInput').val();
     toDoArr.push(item);
     $('#toDoList').append('<tr><td class="listText"><label for=' + item + '>' + item + '</label><input type="checkbox" value=' + item + '></td></tr>');
     $('#searchInput').val('');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">

  <h1 class="center">To Do List</h1>

  <div class="row">
   <div class="col-sm-4 col-sm-offset-4">
    <div class="input-group">
      <input type="text" class="form-control" id="searchInput" placeholder="Add a new item">
      <span class="input-group-btn">
       <button type="button" class="btn btn-success" id="addItemBtn">Add</button>
      </span>
    </div><!-- ./input-group -->
   </div> <!-- ./col-sm-4 col-sm-offset-4 -->
  </div><!-- ./row -->

  <div class="row">

   <div class="col-sm-6">
    <h3 class="center">To Do:</h3>
    <table class="table table-striped">
     <tbody id="toDoList">
      <!-- Items added here -->
     </tbody>
    </table>
   </div> <!-- ./col-sm-6 -->

   <div class="col-sm-6">
    <h3 class="center">Completed:</h3>
    <table class="table table-striped">
     <tbody id='completedItems'>
      <div id='log'></div>
      <!-- COMPLETED ITEMS TO BE ADDED -->
     </tbody>
    </table>
   </div> <!-- ./col-sm-6 -->

  </div> <!-- ./row -->
 </div> <!-- ./container -->

    <div class="container">

  <h1 class="center">To Do List</h1>

  <div class="row">
   <div class="col-sm-4 col-sm-offset-4">
    <div class="input-group">
      <input type="text" class="form-control" id="searchInput" placeholder="Add a new item">
      <span class="input-group-btn">
       <button type="button" class="btn btn-success" id="addItemBtn">Add</button>
      </span>
    </div><!-- ./input-group -->
   </div> <!-- ./col-sm-4 col-sm-offset-4 -->
  </div><!-- ./row -->

  <div class="row">

   <div class="col-sm-6">
    <h3 class="center">To Do:</h3>
    <table class="table table-striped">
     <tbody id="toDoList">
      <!-- Items added here -->
     </tbody>
    </table>
   </div> <!-- ./col-sm-6 -->

   <div class="col-sm-6">
    <h3 class="center">Completed:</h3>
    <table class="table table-striped">
     <tbody id='completedItems'>
      <div id='log'></div>
      <!-- COMPLETED ITEMS TO BE ADDED -->
     </tbody>
    </table>
   </div> <!-- ./col-sm-6 -->

  </div> <!-- ./row -->
 </div> <!-- ./container -->

This code adds the items successfully, but for some reason, I cannot grab the items that are selected with the checkbox. I have tried $('input[type=checkbox]').click(function() { $('input:checked') ... } and the many other variations of such and even tried to simply have the page alert when a checkbox is checked, to no avail.

I was under the assumption that bootstrap automatically detected if a checkbox is checked and added the 'checked' attribute, however, I am wondering if because I am adding it dynamically if that functionality breaks?

In the end, I am looking to move the items when completed (aka when the checkbox is checked) over to the "completed" section in a similarly dynamic way as above, while splicing the item from the toDoArr and pushing it into a new array (which I can do). Why can't I grab the item that had the checked checkbox?

I'm amazed that you're using ES6 JavaScript... yet still using HTML tables. The problem is with the dynamic generation; you need to add an event handler dynamically which **then** calls the click function. You may want to look into [JavaScript closures](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1) :) — Obsidian Age, Mar 01 '17 at 21:07
@ObsidianAge forgive my ignorance, are HTML tables outdated? I was using them because of the inherit style given by bootstrap — CharStar, Mar 02 '17 at 01:57
Not ignorance at all! Tables aren't necessarily 'outdated', they just don't work well with responsiveness -- there's no easy way to move one table element below another through CSS. If you use a
you can change it from `display: table` / `display: table-row` / `display: table-cell` to `display: block` within a media query, and have the table 'stack' on mobile devices, where the screen width isn't wide enough to accommodate the entire table :) — Obsidian Age, Mar 02 '17 at 02:06
@ObsidianAge Thank you for being kind! And thank you for the explanation. I have successfully built this to do app and was able to move the table element from the "To Do" section to the "completed" section. Not the most elegant code and definitely some trip ups with this dynamic approach... I will definitely keep this in mind when building this to do app for learning other languages! — CharStar, Mar 02 '17 at 02:10

dynamically adding items to table, want to select checked checkboxes and move

0 Answers0