2版本的jQuery按钮切换-1不起作用

所以我有两种方法来创建一个名称发生变化的切换按钮。第一个很有魅力。第二个选项仅在第一次单击后有效。知道为什么吗

HTML:

---

在代码中设置断点，并手动检查变量，以确保比较的字符串是正确的。还要注意，第二个应该是.IDs，必须是唯一的。在代码中放置一个断点，并手动检查变量，以确保比较的字符串是正确的。还要注意，第二个应该是.id必须是唯一的

<input id="showHideButton" type="button" value="inputRead More"></input>
<button id="showHideButton" type="text" value="Read More">buttonRead More</button>

//an input that will toggle paragraph content AND change the value 
//of the button on toggle

$(document).ready(function() {
  $("input").click(function() {
    $("p").toggle();
    if ($(this).val() == "inputRead More") {
      $(this).val("inputRead Less");
    } else {
      $(this).val("inputRead More");
    }
  })
})

//a button that will toggle paragraph content AND
//change the value of the button on toggle

$(document).ready(function() {
  $("button").click(function() {
    $("p").toggle();
    if ($(this).html() == "buttonRead More") {
      $(this).html("buttonRead Less");
    } else {
      $(this).html("buttonRead More");
    }
  })
})