ajax - jQuery を使用して複数の異なるキャンバス要素に絵を描く

Question

複数のキャンバスで ajax リクエストから返された要素を描画しようとしていますが、最初のキャンバスにすべての画像を描画するだけです。

成功関数の各キャンバス要素にアクセスして画像を描画するにはどうすればよいですか?

Jクエリ

$(document).ready( function() {

    $('.citizen').each( function( i, citizen) {
        $.ajax({
            type : 'GET',
            url : 'getCitizenPhoto.htm',
            data : {
                socialSecurityNumber : $(citizen).val()
            },
            dataType : 'text',
            success : function(data,i) {


                var image = new Image();
                image.src = data;
                image.onload = function() {
                    var ctx = document
                    .getElementById("#photoCvs")
                    .getContext('2d');
                     ctx.drawImage( image, 0, 0, 200, 200 );

                }
            }
        });
    });

HTML

        <p>Victims</p>

        <c:forEach items="${victimMonitoringList}" var="victims">
        <div id="victim_row">
 <input class="citizen" id= "socialSecurityNumber" value= "${vitims.socialSecurityNumber}"/>
        <canvas id="photoCvs" class="canvas" height="200" width="200"></canvas>
        </div>  

        <div id="criminals">

        <c:forEach items="${criminalMonitoringList}" var="criminals">
        <div id="criminal_row">
     <p>Criminals</p>
    <input class="citizen" id= "socialSecurityNumber" value= "${criminal.socialSecurityNumber}"/>
        <canvas id="photoCvs" class="canvas" height="200" width="200"></canvas>
        </div>