JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo_class">
   <p>lorem ipsum</p>
   <input type="hidden" value="some-value">
</div>
<div class="demo_class">
   <p>lorem ipsum</p>
   <input type="hidden" value="some-value">
</div>
<div class="demo_class">
   <p>lorem ipsum</p>
   <input type="hidden" value="some-value">
</div>
<div class="demo_class">
   <p>lorem ipsum</p>
   <input type="hidden" value="some-value">
</div>

JavaScript

var container = document.getElementsByClassName("demo_class");
for (var i = 0; i < container.length; i++) {
    var inputValue =   container[i].querySelectorAll("input[type=hidden]")[0].value;
container[i].insertAdjacentHTML(
    'afterbegin', 
    '<a href ="' + inputValue + '">Some text</a>'
   );
}