Your classes/id are incorrect:
Here is the corrected code:
let btn = document.getElementById('reply-button');
let crdbody = document.getElementById('card-body');
let replybox = document.getElementById('reply-box');
let cancel = document.getElementById('cancel-button');
btn.onclick = function() {
replybox.style.display = "contents";
}
cancel.onclick = function() {
crdbody.style.display = "none";
}
<div id="reply-box" class="card">
<div id="card-body">
<textarea class="form-control"></textarea>
<br>
<div class="form-group">
<button class="btn btn-primary" id="reply-button">Post Reply</button>
<button class="btn btn-danger" id="cancel-button">Cancel</button>
</div>
</div>
</div>
It should be noted that display: contents; is still in draft status for CSS (see https://caniuse.com/?search=display%3Acontents and https://drafts.csswg.org/css-display/) which means it may change and isn't a finalized standard yet, so use with caution in production code.
Update if you cannot modify the HTML:
let btn = document.getElementById('reply-button');
let replybox = document.getElementById('reply-box');
let cancel = document.querySelector('.btn.btn-danger');
btn.onclick = function() {
replybox.style.display = "contents";
}
cancel.onclick = function() {
replybox.style.display = "none";
}
<button class="btn" id="reply-button">Reply</button>
<div id="reply-box" class="card" style="display: none">
<div class="card-body">
<textarea class="form-control"></textarea>
<br>
<div class="form-group">
<button class="btn btn-primary">Post Reply</button>
<button class="btn btn-danger">Cancel</button> </div>
</div>
</div>
When selecting elements by classes, you can use document.querySelector (for single elements) and document.querySelectorAll (for multiple elements).
Additionally, I removed the unnecessary crdbody variable and adjusted the script to properly show/hide the replybox multiple times.