JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="radio-toolbar">
  <input type="radio" id="radio1" name="howMany" value="q10" onclick="addq('10')">
  <label for="radio1">10</label>

  <input type="radio" id="radio2" name="howMany" value="q20" onclick="addq('20')">
  <label for="radio2">20</label>

  <input type="radio" id="radio3" name="howMany" value="q30" onclick="addq('30')">
  <label for="radio3">30</label>
</div>

<div id="cats">
<p><a id="test" href="/music/">Link1</a></p>
<p><a href="/geography/">Link2</a></p>
</div>

CSS

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

JavaScript

function addq(el) {
var url = document.getElementById('test');

var a = document.getElementById('cats').getElementsByTagName('a');

for(var i = 0; i< a.length; i++){
    a[i].href = a[i].href + "?q=" + el;
}




}