title: How to repeat 'onclick' function with AJAX within ID?
body: <p>I'm trying to run new AJAX upload and insert a data element from the <code>onClick</code> of an item to multirow , the problem is it work for first row and when I add another row the function is not working when I click on it .</p>
  
  <p>HTML code is :</p>
  
  <pre><code>   &lt;table id="images" class="list"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;td class="left"&gt;&lt;?php echo $entry_image; ?&gt;&lt;/td&gt;
              &lt;td class="right"&gt;&lt;?php echo $entry_sort_order; ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;?php $image_row = 0; ?&gt;
          &lt;?php foreach ($product_images as $product_image) { ?&gt;
          &lt;tbody id="image-row&lt;?php echo $image_row; ?&gt;"&gt;
            &lt;tr&gt;
              &lt;td class="left"&gt;&lt;div class="image"&gt;&lt;img src="&lt;?php echo $product_image['thumb']; ?&gt;" alt="" id="thumb&lt;?php echo $image_row; ?&gt;" /&gt;
                  &lt;input type="hidden" name="product_image[&lt;?php echo $image_row; ?&gt;][image]" value="&lt;?php echo $product_image['image']; ?&gt;" id="image&lt;?php echo $image_row; ?&gt;" /&gt;
                  &lt;br /&gt;
                  &lt;a onclick="image_upload('image&lt;?php echo $image_row; ?&gt;', 'thumb&lt;?php echo $image_row; ?&gt;');" id="imagerow&lt;?php echo $image_row; ?&gt;" class="rowman"&gt;&lt;?php echo $text_browse; ?&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;&lt;a onclick="$('#thumb&lt;?php echo $image_row; ?&gt;').attr('src', '&lt;?php echo $no_image; ?&gt;'); $('#image&lt;?php echo $image_row; ?&gt;').attr('value', '');"&gt;&lt;?php echo $text_clear; ?&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td class="right"&gt;&lt;input type="text" name="product_image[&lt;?php echo $image_row; ?&gt;][sort_order]" value="&lt;?php echo $product_image['sort_order']; ?&gt;" size="2" /&gt;&lt;/td&gt;
              &lt;td class="left"&gt;&lt;a onclick="$('#image-row&lt;?php echo $image_row; ?&gt;').remove();" class="button"&gt;&lt;?php echo $button_remove; ?&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;?php $image_row++; ?&gt;
          &lt;?php } ?&gt;
          &lt;tfoot&gt;
            &lt;tr&gt;
              &lt;td colspan="2"&gt;&lt;/td&gt;
              &lt;td class="left"&gt;&lt;a onclick="addImage();" class="button"&gt;&lt;?php echo $button_add_image; ?&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tfoot&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>javascript code for Add function for row is :
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var image_row = &lt;?php echo $image_row; ?&gt;;
  
  function addImage() {
  
  
      html  = '&lt;tbody id="image-row' + image_row + '"&gt;';
   html += '  &lt;tr&gt;';
   html += '    &lt;td class="left"&gt;&lt;div class="image"&gt;&lt;img src="&lt;?php echo $no_image; ?&gt;" alt="" id="thumb' + image_row + '" /&gt;&lt;input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /&gt;&lt;br /&gt;&lt;a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');" id="imagerow' + image_row + '" class="rowman"&gt;&lt;?php echo $text_browse; ?&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;&lt;a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'&lt;?php echo $no_image; ?&gt;\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"&gt;&lt;?php echo $text_clear; ?&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;';
   html += '    &lt;td class="right"&gt;&lt;input type="text" name="product_image[' + image_row + '][sort_order]" value="" size="2" /&gt;&lt;/td&gt;';
   html += '    &lt;td class="left"&gt;&lt;a onclick="$(\'#image-row' + image_row  + '\').remove();" class="button"&gt;&lt;?php echo $button_remove; ?&gt;&lt;/a&gt;&lt;/td&gt;';
   html += '  &lt;/tr&gt;';
   html += '&lt;/tbody&gt;';
   
   $('#images tfoot').before(html);
   
   image_row++;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and jQuery code for <code>onclick</code> function is :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function image_upload(field, thumb) {
  var image_row = &lt;?php echo $image_row; ?&gt;;
   new AjaxUpload('#imagerow'+image_row ,{
   action: 'index.php?route=common/filemanager/upload&amp;image=' + encodeURIComponent($('#' + field).attr('value')),
    name: 'image',
    autoSubmit: true,
    responseType: 'json',
        
    onChange: function(file, extension) {
     
     this.setData({'directory': ''});
           this.submit();
    },
        
    onSubmit: function(file, extension) {
     $('#upload').append('&lt;img src="catalog/view/theme/mall/image/loading.gif" class="loading" style="padding-left: 5px;" /&gt;');
    },
    onComplete: function(file, json) {
     if (json.success) {
                $('#' + field).attr('value','data/user/'+file)
      $.ajax({
      url: 'index.php?route=common/filemanager/image&amp;image=' + encodeURIComponent($('#' + field).attr('value')),
       dataType: 'text',
       success: function(text) {
        $('#' + thumb).replaceWith('&lt;img src="' + text + '" alt="" id="' + thumb + '" /&gt;');            
       }
      });
     }
     
     if (json.error) {
      alert(json.error);
     }
              
     $('.loading').remove(); 
    }
   });
   
   
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is a pic for explanation 
  <img src="https://i.stack.imgur.com/NSzVx.png" alt="description image"></p>
  
  <p>can I get help?</p>