javascript - Change div color on checking all check boxes in hidden form -

have several problems , can't find solution. code https://jsfiddle.net/46qybyrh/2/

upper table html

<div class="block"> <table>     <tr>         <th>nr.</th>         <th style="width: 200px">task</th>         <th>progresas</th>         <th></th>     </tr>     <tr>         <td>1</td>         <td>air port scedules</td>         <td>0/3</td>         <td>             <button onclick="showdiv()">expand</button>         </td>     </tr> </table> 

hidden div

<div id="popup" class="popupbox">     <table class="block">         <tbody>         <tr>             <td></td>             <form>                 <td>xml</td>                 <td>                     <span>comment</span><br>                     <textarea></textarea>                 </td>                 <td>                     <span>deadline</span>                     <input type="date" value="2017-08-24">                 </td>                 <td>done:<input type="checkbox"></td>                 <td><input type="submit" value="apply"></td>             </form>         </tr>         <tr>             <td></td>             <form>                 <td>scedules</td>                 <td>                     <span>comment</span><br>                     <textarea></textarea>                 </td>                 <td><span>deadline</span>                     <input type="date" value="2017-08-10">                 </td>                 <td>done:<input type="checkbox"></td>                 <td><input type="submit" value="apply"></td>             </form>         </tr>         <tr>             <td></td>             <form>                 <td>infobox</td>                 <td>                     <span>comment</span><br>                     <textarea></textarea>                 </td>                 <td><span>deadline</span>                     <input type="date" value="2017-08-14">                 </td>                 <td>done:<input type="checkbox"></td>                 <td><input type="submit" value="apply"></td>             </form>         </tr>         </tbody>     </table>     <button onclick="hidediv()">close</button></div> 

main aims of code should be:

1. when press apply on each row, hidden div should not hide. information comment, date, check box should change.
2. when 3 check boxes selected, upper tables first row (1 air port scedules 0/3) should change background color.
3. if deadline close (let 5 days till deadline) entire row should change background color.
4. if deadline passed entire row should change background color.

i know lot ask maybe of guide me on each of steps.

i took fiddle , put codepen , messed around while. able wanted lot of jquery. learn jquery, try www.w3schools.com/jquery.

here codepen: https://codepen.io/pen/ojxzje

in few short steps:

• i removed <form> tags, <input type='submit'>, , <tbody> make code cleaner (the submit button causing problems hiding div mentioned @angelol.
• i reformatted lower table bit make cleaner jquery work nicely. (i added header row , removed text blocks)
• i included jquery library
• i renamed jquery functions , created 1 more (open(), close(), , apply(). called buttons respectively.
• inside open() function, showed rows in second table class if items-[id of list in]. way there clean list of of tasks instead of having new table every new list.
• the open() function changes button expand hide calls close function.
• the close() function hides second table , changes name of button expand.
• the apply() function run whenever press apply button. performs 2 checks:
  • checks of checkboxes in table rows labeled .details-[id working with] , if checked, selects list's row in upper table. adds green color background.
  • it finds dates , compares them today's date (thanks again @angelol. if date within 5 days, selects row date on , changes color. if date has passed or today, colors row red.

it's lot of code , bunch of reorganization, let me know if having trouble understanding , can walk through steps.