Is there any way to change input text and select form back and forth?

Question

I have two input with the same name. One is input text and another is select option. I use two button named buttonShow and buttonHide. buttonShow replace the input text to select and buttonHide does the opposite. I've tried using replaceWith(), but it only works for the first time and not the second time. Is there any way to change it back and forth?

HTML

  <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">');
});

Answer 1

$("buttonHide") 

is missing the #. replace with

$("#buttonHide")