title: Append data-id to href using js or jQuery
body: <p>Suppose I have a table that looks like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr class="card-id" data-id="1"&gt;
        &lt;td&gt;
           &lt;a href="http://www.test.nl/"&gt;Card 1&lt;/a&gt;
           &lt;input class="option" type="checkbox" /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="card-id" data-id="2"&gt;
        &lt;td&gt;
           &lt;a href="http://www.test.nl/"&gt;Card 2&lt;/a&gt;
           &lt;input class="option" type="checkbox" /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="card-id" data-id="3"&gt;
        &lt;td&gt;
           &lt;a href="http://www.test.nl/"&gt;Card 3&lt;/a&gt;
           &lt;input class="option" type="checkbox" /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Is it possible to get the data-id of the table row which have are checked then append these to the url?</p>
  
  <p>I tried using this code in js</p>
  
  <pre><code>        $(".option").click(function () {
            var id = $(this).closest('.card-id').data('id');
  
            $(".options-count a").each(function () {
              var $this = $(this);
              var _href = $this.attr("href");
              $this.attr("href", _href + 'card-id=' + id);
            });
         });
  </code></pre>
  
  <p>and got this</p>
  
  <pre><code>&lt;a href="http://www.test.nl/card-id=1card-id=2"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>but I was hoping for something like</p>
  
  <pre><code>&lt;a href="http://www.test.nl/result?card_id=1&amp;card_id=2"&gt;Card 1&lt;/a&gt;
  </code></pre>