title: on keyup, update meta description
body: <p>The below working code fetch all meta tags from head and displays the text inside a div on a web page. On keyup, i would like to copy input text val and replace head meta description and also update div so I can see that the text has been entered correctly from the front-end.</p>
  
  <p><a href="http://jsfiddle.net/michelm/JCWgA/" rel="nofollow">http://jsfiddle.net/michelm/JCWgA/</a></p>
  
  <p>Two things that I am having issue with:</p>
  
  <ol>
  <li>copying the new value of the input text box and replace the "content" of the meta name="description" content="new text added" (inside the div)</li>
  <li>copy the val of the input text box and replace 'content' of the head meta description</li>
  </ol>
  
  <p>Some of the code below:</p>
  
  <pre><code> &lt;h2&gt;Meta Description&lt;/h2&gt;
      &lt;!-- I have head meta tags inside the below div to read the tags on the web page --&gt;
      &lt;div class="all"&gt;some text&lt;/div&gt;
  
  &lt;!-- input text on keyup to 1. update head meta description, 2 update meta description inside the div (&lt;div class="all"&gt;some text&lt;/div&gt;) --&gt;
  
  &lt;input type="text" name="metadescription" id="metadescription" /&gt;
  
  &lt;!-- this part of jquery is working --&gt;
  &lt;script type="text/javascript"&gt;
  
  var foo = '';
  
  $("head meta").each(function () {
      foo += $(this).clone().wrap('&lt;div&gt;').parent().html();
  });
  
  //alert(foo); 
  var b = $('.all').text(foo);
  
  
  // the below is part is not quite working
  $description = $('.all').find('meta[name=description]').attr('content');
  
  $('#metadescription').keyup(function(){
    //  $('.all').find($description).text($(this).val());
      //the below just replace all the text, but I want it to replace the 'content'
      $('.all').text($(this).val());
      //alert(foo); 
  
  
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I got this to work, a big part goes to thanking softsdev for the most of the code :))</p>
  
  <p><em>*</em> Below is the FULL working code!!!! **</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;meta name="description" content="This is the meta description of some sort" &gt;
  &lt;meta name="keywords" content="some, content, added" &gt;
  &lt;title&gt;change meta content&lt;/title&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $( document ).ready(function(){
          $('.content').keyup(function(){
              $('meta[name=description]').attr('content', $(this).val());
          });
  
  
      });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
      &lt;h2&gt;Meta Description&lt;/h2&gt;
  
  &lt;div class="all"&gt;some text&lt;/div&gt;
      &lt;h4&gt;Update meta description&lt;/h4&gt;
  &lt;input type="text" name="content"  class="content"/&gt;
  
  &lt;script type="text/javascript"&gt;
  $('.content').keyup(function(){
  
      $('.all').text('&lt;meta name="description" content="'+$(this).val()+'"&gt;');
  
  });
  
  
  $('.all').append(($('meta[name=descritption]').attr('content')));
  var tt = jQuery.metadata.get(name=descritption)
     $('.all').text(tt);
     $('meta[name=description]').attr('description').insertAfter('body');
  &lt;/script&gt;
  
  &lt;script language="JavaScript"&gt;
  if (document.getElementsByName) {
  
    var metaArray = document.getElementsByName('description');
    for (var i=0; i&lt;metaArray.length; i++) {
     // document.write(metaArray[i].content + '&lt;br&gt;');
              $('.all').text('&lt;meta name="description" content="'+ metaArray[i].content +'"&gt;' );
  
    }
  
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>