title: recall data from a JSON file to a textarea after saving that input dynamically to JSON
body: <p>HTML:</p>
  
  <pre><code>&lt;label&gt;Label: &lt;/label&gt;
  &lt;br /&gt;
  &lt;input type="text" id="label" class="label"/&gt;&lt;hr /&gt;
  &lt;label&gt;Note Content: &lt;/label&gt;
  &lt;br /&gt;
  &lt;textarea id="content"&gt;&lt;/textarea&gt;&lt;hr /&gt;
  &lt;button id="saveBtn"&gt;SAVE&lt;/button&gt;&lt;hr /&gt;
  &lt;div id="output"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(saveBtn).click(function(){
  var noteLabel = $(label).val();
  var noteContent = $(content).val();
  var outputarea = $(output);
  var info = [
   { "label":"John" , "content":"Doe" }];
  $.each(info, function() {
      i=0;
      info[i].label = noteLabel;
      info[i].content = noteContent;
      outputarea.append('label: ' + info[i].label + '&lt;br&gt;content:' + info[i].content + '&lt;button onclick="recallNote();"&gt;Recall&lt;/button&gt;&lt;hr /&gt;');
      i++;
      function recallNote(){
          $(label).val(info[i].label); 
          $(content).val(info[i].content); 
      }
  });
  });
  </code></pre>
  
  <p>I am trying to get the function recallNote() to get the input box and textarea to change to the value of the text that is associated with the button. If you look at my JSFiddle you should be able to understand better. </p>
  
  <p>When you enter text into the input box and textarea and then click the save button the text will get stored into a JSON object and then displayed in the output div. </p>
  
  <p>Essentially i am trying to create a notepad web app so i can store notes and the recall button is suppsed to recall them back into the input box and textarea above so that the user can edit the note and label of the note. </p>