title: get value from <input> which is in a <li> and append value into <li> as a link (a)
body: <p>I tried to get the value from each input in an li and append the value into the label as a link. Here is my code. Something is obviously wrong. How can I fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("ul li label").each(function() {
   var $link = $("ul li label input").val(); 
   $(this).append('&lt;span&gt;&lt;a target="_blank" href="' + $link + '"&gt; PDF-Download&lt;/a&gt;&lt;/span&gt;');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" value="/first.pdf" /&gt;first&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" value="/second.pdf" /&gt;second&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" value="/third.pdf" /&gt;third&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At the end it should look like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" value="/first.pdf" /&gt;first&lt;a target="_blank" href="/first.pdf"&gt; PDF-Download&lt;/a&gt;&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" value="/second.pdf" /&gt;second&lt;a target="_blank" href="/second.pdf"&gt; PDF-Download&lt;/a&gt;&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" value="/third.pdf" /&gt;third&lt;a target="_blank" href="/third.pdf"&gt; PDF-Download&lt;/a&gt;&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>