JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="todo">
  <input  type="text" />
  <button>
  submit  
  </button>
  <p class="output">
    test
  </p>
</div>

<div class="todo">
  <input  type="text" />
  <button>
  submit  
  </button>
  <p class="output">
    test
  </p>
</div>

<div class="todo">
  <input  type="text" />
  <button>
  submit  
  </button>
  <p class="output">
    test
  </p>
</div>

CSS

div {
  padding: 10px;
}

JavaScript

Array.from(document.querySelectorAll(".todo button"))
	.forEach( todo => 
  	todo.addEventListener("click", apa ));
    
    
function apa(event) {
	const value = event.target
		.parentElement
    .querySelector("input").value;
    
	event.target
		.parentElement
    .querySelector(".output")	
    .innerHTML = value;
}