title: How to add a dynamic image to a specific cell in a table using JQuery?
body: <p>Below is code that I'm using to add specific input values that a user enters in a modal, to a table using JQuery, however I am struggling with inputting the image to the table, the user would select the image they want using a file form input which uses the ID of <code>#insert-image</code>. This is the code I have so far which doesn't work:</p>
  
  <pre><code>$("#btnAdd").on('click', function() {
    if ($("#insert-image").val() !== '' &amp;&amp; $("#insert-name").val() !== '' &amp;&amp; $("#insert-surname").val() !== '') {
      var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, '');
      let row = '&lt;tr&gt; &lt;td&gt;' + "image" + '&lt;/td&gt; &lt;td&gt;' + $("#insert-name").val() + '&lt;/td&gt; &lt;td&gt;' + $("#insert-surname").val() + '&lt;/td&gt; &lt;td&gt;' + "edit" + '&lt;/td&gt; &lt;td&gt;' + "delete" + '&lt;/td&gt; &lt;/tr&gt;'
      $('tbody').append(row);
      $('td:contains("image")').html("&lt;img src="images/imagePrep" alt="selected-image"&gt;").addClass("text-center");
      $('td:contains("edit")').html("&lt;i class='fas fa-edit'&gt;&lt;/i&gt;").addClass("text-center edit edit:hover")
      $('td:contains("delete")').html("&lt;i class='far fa-trash-alt'&gt;&lt;/i&gt;").addClass("text-center delete delete:hover").attr("id", "btnDelete").on('click', function() {
        $(this).parent('tr').remove();
      });
    }
  });
  </code></pre>
  
  <p>So basically the line in question is this:</p>
  
  <pre><code>$('td:contains("image")').html("&lt;img src="images/imagePrep" alt="selected-image"&gt;").addClass("text-center");
  </code></pre>
  
  <p>Any help would be much appreciated.</p>