How to change image on dynamic checkboxes?

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)...

 plcUserReq.Controls.Add(new LiteralControl("
<div data-toggle='buttons' style='margin-top:-3px'>
  <label class='btn' for='Lines' style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'>
     <input type='checkbox' autocomplete='off' name='chkbx' value='" + UID.ToString() + "'id='chk'"+ UID.ToString() + i.ToString() +"/>
           <i class='btn fa fa-plus-square-o' aria-hidden = 'true'>
                 <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...

$("#chkbx").change(function () {
        if ($(this).is(':checked'))
            {
             $(this).prev().find('i').attr('class', 'btn fa fa-check-square-o');
             $(this).prev().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
            }
        else
        {
            $(this).prev().find('i').attr('class', 'btn fa fa-plus-square-o');
            $(this).prev().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
        }
});

Nothing happens when any of the checkboxes are clicked...I can't seem to figure what the problem is with my JQuery.. Please help! I'm stuck!