Text/Javascript rowcount is not working returns only 0

Question

im using laravel and javascript and the rowcount does not read the following variables after first vairables. what im trying to do is to submit multiple IPs and when i check it using dd only gets the first variable and in the "alert(rowCount); it returns zero". plss help with this thank you..

this is the blade.php

</div>
        <div class="row">
           <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
                <h5 class="text-truncate col-10 mt-3"> <span class="fas fa-list-ol icons"></span> <b>Server Description</b></h5>
                <hr class="col-11 col-xs-11 col-sm-11"></hr>
                <div class="tbl_div row col-11 col-xs-11 col-sm-11 ">
                    <div class="row col-2 col-xs-2 col-sm-2 col-md-3">
                        <a href="#" class="p-2" id="addrow"><span class="fas fa-plus"></span> ADD Source / Destination</a>
                    </div>  
                    <table class="table table-hover table-responsive table-fw-widget " id="tblItems" >
                        <thead class="">
                            <td class="col-md-1  text-center border-0">
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">Source Servername</td>
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">IP address</td>
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">Destination Servername</td>
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">IP address</td>
                        </thead>
                        <tbody>
                            <!-- @foreach(old('source_name', ['value']) as $fw_ip) -->
                                <tr>
                                    <td class="col-md-1 text-center">
                                    <label class="form-label" id="row_no"><b>#1</b></label></td>
                                    <td class="col-md-3">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" name="source_namex[]" class="form-control">
                                    </td>
                                    <td class="col-md-3">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" class="form-control text-center" name="sourceip[]" maxlength="15" value="{{ old('sourceip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                    </td>
                                    <td class="col-md-3">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" name="destname[]" class="form-control" value="{{ old('destname.'.$loop->index) }}">
                                    </td>
                                    <td class="col-md-4">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" class="form-control text-center" name="destip[]" maxlength="15" value="{{ old('destip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                    </td>
                                    <td class="col-md-3">
                                        <center><span class="fas fa-trash-alt fa-lg mt-2 icons removerow"></span></center>
                                    </td>
                                </tr>
                            <!-- @endforeach -->
                            </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-6 col-xs-6 col-sm-6 col-md-3 col-lg-3 col-xl-2 ">
                        <div class="form-group">
                          <button type="submit" class="btn btn-allcard btn-block col-10">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

javascipt

<script type="text/javascript">
  
    var rowCount = $("#tblItems tbody>td").length;
    var rowCount = ;
    alert(rowCount);
    $('.type').change(function()
    {
       
    });
    $('#addrow').click(function()
    {
        rowCount += 1;
        
        $("#tblItems tbody>tr:first").clone(true).insertAfter("#tblItems tbody>tr:last");
        $("#tblItems tbody>tr:last").attr("id", "tr"+rowCount);
        $("#tblItems tbody>tr:last #row_no").text("#"+rowCount);
        $("#tblItems tbody>tr:last #row_no").css('font-weight','bold');
        $("#tblItems tbody>tr:last :input").val("");
       
     
    });
    $('.removerow').click(function()
    {
        var id = $(this).closest('tr').attr('id')
        $('table#tblItems tr#'+id).remove();
        rowCount -=1;
    });


      
</script>

Answer 1

The problem is with your CSS selector, specifically the > in #tblItems tbody>td" .

From MDN :

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

(Emphasis mine)

This means you are instructing jQuery to return all <td> elements that are direct children of the <tbody> in the the table with id #tblItems . But there are no such direct children because all of the <td> elements are children of a <tr> .

Your selector would either need to include the <tr> child, as in:

$("#tblItems tbody>tr>td")

Or just do without the child combinator (>) completely:

$("#tblItems tbody td")

Update

I mistakenly assumed that it was the count of <td> elements that was desired because the td was in the selector. I should have paid more attention to the fact that the variable name used is called "rowCount". As stated by @Win in the comments, to select <tr> elements, the selector would be:

$("#tblItems tbody > tr")

The use of the child combinator ( > ) in this case is acceptable because all of the <tr> elements we want will be direct children of the <tbody> . But it is important to understand that it will work equally well without the > as long as there are no nested <tr> s in the <tbody> .