I have a table with a list of items which has a button on each row, and I want each button to only be clicked once and then disappear after they click it once, but the other buttons stay till they are clicked.
I have the button linked to an action already and I have tried putting an id with the button and doing document.getElementById('creditBtn').style.display='none however it does not hide the button.
function submitCredit(reviewerId, reviewId) {
let socialCredit = document.getElementById('socialCredit').value;
const body1 = { credit: socialCredit };
axios.put('http://localhost:8080/awardCredit/:' + reviewerId, body1)
.then(alert("Submitted Credit"));
const body2 = { hasReward: 1 };
axios.put('http://localhost:8080/awardCredit/hasReward/:' + reviewId, body2)
.then( window.location.href = "http://localhost:3000/viewreviews");
document.getElementById('creditBtn').style.display='none'
}
<h2>Completed Reviews</h2>
<div className="writertable">
<table>
<thead>
<tr>
<th>Title (Click to View Work)</th>
<th>Award Credit(0-1)</th>
</tr>
</thead>
<tbody>
{reviewTaskDisplay.map((val) => (
<tr>
<td onClick={(e) => viewReview(val.reviewId)}>{val.title}</td>
<td><input type="number" id="socialCredit" name="socialCredit" min="0" max="1"
defaultValue="0"/>
<button id="creditBtn" onClick={(e) =>
submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>
</tr>
))}
</tbody>
</table>
</div>
Any advice on how I can go about this is appreciated
Check this line <button id="creditBtn" onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>
You are creating all the buttons with the same id and in the submitCredit function, you are applying display: none to the same which will remove the buttons that are created by using the same id.
You can do something like this below.
<button id={val.reviewId} onClick={(e) => submitCredit(val.reviewer, val.reviewId)}>Submit Credit</button></td>
// submitCredit
document.getElementById(reviewId).style.display='none'
Check this sanbbox