I'm new to JQuery and would really appreciate some help!

I have dynamic checkboxes which has an icon and image on it (checkbox is hidden)...

1.  plcUserReq.Controls.Add(new LiteralControl("
2. <div data-toggle='buttons' style='margin-top:-3px'>
3.      <label class='btn' for='Lines' style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'>
4.          <input type='checkbox' autocomplete='off' name='chkbx' value='" + UID.ToString() + "'id='chk'"+ UID.ToString() + i.ToString() +"/>
5.                <i class='btn fa fa-plus-square-o' aria-hidden = 'true'>
6.                      <img src='http://localhost:3162/images/moderator-red.gif'></i></label></div>"));

I want the image and icon to change on click....when each checkbox is clicked...

This is the script I'm trying with...

2. $("#chkbx").change(function () {
3.             if ($(this).is(':checked'))
4.                 {
5.                  $(this).prev().find('i').attr('class', 'btn fa fa-check-square-o');
6.                  $(this).prev().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
7.                 }
8.             else
9.             {
10.                 $(this).prev().find('i').attr('class', 'btn fa fa-plus-square-o');
11.                 $(this).prev().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
12.             }
13. });

Nothing happens on click...

Please help! I'm stuck!