Max-Length for multiple text areas using php and Javascript

Question

I am trying to display the number of characters left in multiple text areas. Although I have different ID's for the text areas, the max length is prompted only for the 2nd text area and not for the first. My code is as shown below

<textarea id="txtBox"></textarea> 
    <input type="text" id="counterBox"/>
        <script>
            var txtBoxRef = document.querySelector("#txtBox");
            var counterRef = document.querySelector("#counterBox");
            txtBoxRef.addEventListener("keydown",function(){
            var remLength = 0;
            remLength = 160 - parseInt(txtBoxRef.value.length);
            if(remLength < 0)
            {
                txtBoxRef.value = txtBoxRef.value.substring(0, 160);
                return false;
            }
            counterRef.value = remLength + " characters remaining...";
            },true);
        </script>

<textarea id="txtBox1"></textarea> 
    <input type="text" id="counterBox1"/>
            <script>
                var txtBoxRef = document.querySelector("#txtBox1");
                var counterRef = document.querySelector("#counterBox1");
                txtBoxRef.addEventListener("keydown",function(){
                var remLength = 0;
                remLength = 160 - parseInt(txtBoxRef.value.length);
                if(remLength < 0)
                {
                txtBoxRef.value = txtBoxRef.value.substring(0, 160);
                return false;
                }
                counterRef.value = remLength + " characters remaining...";
                },true);
            </script>

The result is as below (What I have):

What I want :

Answer 1

Looks like the variables txtBoxRef and counterRef are in the same scope area, you declared twice.

<textarea id="txtBox"></textarea> 
    <input type="text" id="counterBox"/>
        <script>
            var txtBoxRef = document.querySelector("#txtBox");
            var counterRef = document.querySelector("#counterBox");
            txtBoxRef.addEventListener("keydown",function(){
            var remLength = 0;
            remLength = 160 - parseInt(txtBoxRef.value.length);
            if(remLength < 0)
            {
                txtBoxRef.value = txtBoxRef.value.substring(0, 160);
                return false;
            }
            counterRef.value = remLength + " characters remaining...";
            },true);
        </script>

<textarea id="txtBox1"></textarea> 
    <input type="text" id="counterBox1"/>
            <script>
                var txtBoxRef1 = document.querySelector("#txtBox1");
                var counterRef1 = document.querySelector("#counterBox1");
                txtBoxRef1.addEventListener("keydown",function(){
                var remLength = 0;
                remLength = 160 - parseInt(txtBoxRef1.value.length);
                if(remLength < 0)
                {
                txtBoxRef1.value = txtBoxRef1.value.substring(0, 160);
                return false;
                }
                counterRef1.value = remLength + " characters remaining...";
                },true);
            </script>

check Fiddle