radio input with external button

Hello I am making a slideshow out of a radio input and have designed "prev" and "next" buttons to move the slide along. However, I would also like the buttons to also check the next input. Currently the slide moves, but the next input isn't checked. I have looked at this solution here: Select next/prev radio button with external button and tried to implement it but I cannot get it to work. Here is my code: <form action="" method="post"> <ul class="form-ul" style="position: relative; width: 176px; height: 107px;"> <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 82px; height: 43px;"> <label> <input type="radio" name="term_id" value="59" checked="checked"> </label> </li> <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 82px; height: 62px;"> <label> <input type="radio" name="term_id" value="61"> </label> </li> </ul> <div id="prev" style="float:left;">PREV</div> <div id="next" style="float:right;">NEXT</div> </form> $(document).ready(function(){ $('#prev').click(function(){ $('.form-ul').find('li:has(input:checked)').prev().children('input').prop("checked", true); }); $('#next').click(function(){ $('.form-ul').find('li:has(input:checked)').next().children('input').prop("checked", true); }); });