jquery - Star rating widget not updating on iPad and iPhone -

i have implmented custom star-rating widget in css jquery based on radio inputs. works fine on desktop browsers , android devices it's not working on ipad iphone.

you can see widget in action here.

on ipad (or iphone) when touch star, doesnt' remain checked.

here th full code: a jsfiddle

html

<form id="signup_form" class="custom" enctype="multipart/form-data" method="post" name="signup_form" action="">   <div id="field_2">     <input id="option_221" type="radio" title="very happy" value="actual_job_rate_5" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_220" type="radio" title="happy" value="actual_job_rate_4" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_219" type="radio" title="neutral" value="actual_job_rate_3" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_218" type="radio" title="unhappy" value="actual_job_rate_2" name="field_2" style="display: none;">     <span class="custom radio" ></span>     <input id="option_217" type="radio" title="very unhappy" value="actual_job_rate_1" name="field_2" style="display: none;">     <span class="custom radio" ></span>   </div> </form> 

css

/* star rating radio buttons */  form.custom #field_2:not(old) {   display: inline-block;   width: 9.5em;   height: 1.9em;   overflow: hidden;   vertical-align: bottom;   float: left; }  form.custom #field_2:not(old) > input {   margin-right: -100%;   opacity: 0; }  form.custom #field_2:not(old) > span.custom.radio {   display: block;   float: right;   position: relative;   background: url('http://www.peoplejob.com/wp-content/themes/sweetdate-child/assets/images/star-off.svg');   background-size: contain;   border: 0px;   top: 0px;   left: 0px;   width: 1.9em;   height: 1.9em; }  form.custom #field_2:not(old) > span.custom.radio:before {   content: '';   display: block;   width: 1.9em;   height: 1.9em;   background: url('http://www.peoplejob.com/wp-content/themes/sweetdate-child/assets/images/star-on.svg');   background-size: contain;   opacity: 0;   transition: opacity 0.2s linear;   top: 0px;   left: 0px;   width: 1.9em;   height: 1.9em; }  form.custom #field_2:not(old) > span.custom.radio:hover:before, form.custom #field_2:not(old) > span.custom.radio:hover ~ span.custom.radio:before, form.custom #field_2:not(:hover) >:checked ~ span.custom.radio:before {   opacity: 1; } 

jquery

   var toggleradio = function($element) {     var $input = $element.prev(),         $form = $input.closest('form.custom'),         input = $input[0];      if (false === $input.is(':disabled')) {       $form.find('input:radio[name="' + $input.attr('name') + '"]').next().not($element).removeclass('checked');       if ( !$element.hasclass('checked') ) {         $element.toggleclass('checked');       }       input.checked = $element.hasclass('checked');        $input.trigger('change');     }   };   $(document).on('click', 'form.custom span.custom.radio', function (event) {     event.preventdefault();     event.stoppropagation();      toggleradio($(this));   }); 

thanks !