Show total checkbox count on multiple locations on the same page

Im am using the following code to count the check boxes and display the total count and its working fine. But now i want to display the total count on two different locations on the same page, but it does not work. What am i doing wrong ?

    <input type="checkbox" name="E33" />A
    <input type="checkbox" name="E34" />B
    <input type="checkbox" name="E66" />C

    <p id="result">Total Number of Items Selected = <p>
    <p id="result">Total Number of Items Selected = <p>

    *also show total count inside the text input 
    <input type="text" id="result" name="total" placeholder="show total count"/>



<script>
showChecked();
function showChecked(){
  document.getElementById("result").textContent = "Total Number of Items Selected = " + document.querySelectorAll("input:checked").length;
}
document.querySelectorAll("input[type=checkbox]").forEach(i=>{
 i.onclick = function(){
  showChecked();
 }
});
</script>