是否有任何方法来改变输入文本和选择表单来回?

我有两个同名的输入。一个是输入文本，另一个是选择选项。我使用两个按钮命名为buttonShow和buttonHide。buttonShow替换输入文本来选择，而buttonHide则相反。我试过使用replaceWith()，但它只适用于第一次，而不是第二次。有什么办法可以来回切换吗?

<div class="input-group">
<input type="text" class="form-control" name="family" id="family">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="buttonShow">Show</button>
<button class="btn btn-outline-secondary" type="button" id="buttonHide">Hide</button>
</div>
</div>

JS

$("#buttonHide").hide();
$("#buttonShow").click(function() {
$("#buttonHide").show();
$("#buttonShow").hide();
$("#family").replaceWith('<select class="form-control" name="family" id="family">' +
'<option value="Capitellidae">CAPITELLIDAE</option>' +
'<option value="Chaoboridae">CHAOBORIDAE</option>' +
'<option value="Chironomidae">CHIRONOMIDAE</option>' +
'<option value="Cirratulidae">CIRRATULIDAE</option>' +
'<option value="Eunicidae">EUNICIDAE</option>' +
'<option value="Littorinidae">LITTORINIDAE</option>' +
'<option value="Lumbrinereidae">LUMBRINEREIDAE</option>' +
'<option value="Sabellidae">SABELLIDAE</option>' +
'<option value="Spionidae">SPIONIDAE</option>' +
'<option value="Thiaridae">THIARIDAE</option>' +
'<option value="Tubificidae">TUBIFICIDAE</option>' +
'<option value="Turritellidae">TURRITELLIDAE</option>' +
'</select>');
});
$("buttonHide").click(function() {
$("#buttonHide").hide();
$("#buttonShow").show();
$("#family").replaceWith('<input type="text" class="form-control" name="family" id="family">');
});