I'm fairly new to JS and hoping someone can help me with an issue I'm having while I'm trying to build a demo gallery. I have a JSON file called feed.js and I'm calling certain fields in that JSON file (i.e. the image URL) into a HTML table and that's working no problem. What I'm trying to do next is that when a user clicks on the image the, the cells beside the image populate with more fields called from the JSON file. This is what I have so far but myFunction is outside f is defined so I'm getting "Uncaught ReferenceError: f is not defined" when I click the image. Any ideas of how to get around this would be great! Sorry if this is a real novice question but as I said I'm a newbie!

```
<script>
$(function() {

    var feed = [];

    $.getJSON('feed.json', function(data) {
        $.each(data.phones, function(i, f) {
            var tblRow = "<tr>" + "<td><div id=\"demo1\"><img onclick=\"myFunction()\" id=\"demo\" src=" + f.image + "></div></td></tr>";
            $(tblRow).appendTo("#userdata tbody");

        });
    });

});

function myFunction() {
  document.getElementById("demo1").innerHTML = "<tr>" + "<td><div id=\"demo1\"><img onclick=\"myFunction()\" id=\"demo\" src=" + f.image + "></div></td><td>"+ f.description + "</td><td>" + f.manufacturer + "</td></tr>;"
};
</script>

```