JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>

	</head>
	<body>
		<form>
			<input readonly="true" class="tomodify" value="1">
			<input readonly="true" class="tomodify" value="2">
			<input readonly="true" class="tomodify" value="3">
			<input value="4">
		</form>
		
		<button onclick="allowRead()">Cliquer pour déverrouiller les champs</button>
	</body>
</html>

CSS

input[readonly="true"] {
	color: gray;
	background-color: rgb(200, 200, 200);
}

JavaScript

allowRead = function() {
	let inputsToUnlock = document.querySelectorAll(".tomodify");
	
	for(let inputElement of inputsToUnlock) {
		inputElement.removeAttribute("readonly");
	}
}