Multiple checkboxes with same id and one needs to be selected - jquery

There are multiple checkboxes with same id, in asp.net repeater control. User can select either email or phone against each record in repeater rows.

In following example; there are two rows, if you select the email icon in first row then it ticks relavent checkbox which is fine but if you tick the email icon on the next row then it will untick the first row checkbox instead of ticking the one next to it.

$(function() {
  $("[id*=divchkemail]").click(function() {

    $(this).toggleClass("image-email");

    if ($('#chkemail').prop('checked')) {
      $("#chkemail").prop('checked', false);
    } else {

      if ($('#chkphone').prop('checked')) {
        $("#chkphone").prop('checked', false);
        $("#divchkphone").toggleClass("image-phone");
      }
      $("#chkemail").prop('checked', true);
    }

  });

  $("[id*=divchkphone]").click(function() {


    $(this).toggleClass("image-phone");

    if ($('#chkphone').prop('checked')) {
      $("#chkphone").prop('checked', false);
    } else {
      if ($('#chkemail').prop('checked')) {
        $("#chkemail").prop('checked', false);
        $("#divchkemail").toggleClass("image-email");
      }

      $("#chkphone").prop('checked', true);
    }
  });
});

    .image-phone-disabled {
      background-image: url('http://ift.tt/1QbAr9k');
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    }
    .image-phone {
      background-image: url(http://ift.tt/1OzCTCP);
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    }
    .image-email-disabled {
      background-image: url('http://ift.tt/1QbAr9m');
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    }
    .image-email {
      background-image: url(http://ift.tt/1OzCTCR);
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    }

<script src="http://ift.tt/1g1yFpr"></script>
<table border=0>
  <tr>
    <td>
      <div id="divchkemail" class="image-email-disabled" />
    </td>
    <td>
      <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
    </td>
  </tr>
  <tr>
    <td>
      <div id="divchkphone" class="image-phone-disabled" />
    </td>
    <td>
      <input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>

    </td>

  </tr>
</table>

<br/>
<br/>
<br/>


<span>

  
    

</span>

<table border=0>
  <tr>
    <td>
      <div id="divchkemail" class="image-email-disabled" />
    </td>
    <td>
      <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
    </td>
  </tr>
  <tr>
    <td>
      <div id="divchkphone" class="image-phone-disabled" />
    </td>
    <td>
      <input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
    </td>
  </tr>
</table>
<span>
    
 

</span>

JSFiddle

http://ift.tt/1QbAr9p