Origanl row also hide when I add new style sheet in my code

HTML & CSS
1

Hi i am facing strange issue in my form with dynamic generating rows, when I add following css to my form page then its also hide first row of the table form.

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

here is complete form code with mentioned style sheet

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">	
	<script src="https://code.jquery.com/jquery-git.js"></script>

// style sheet link
	 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table class="table table-bordered">
                    <thead class="table-success" style="background-color: #3fbbc0;">
                      <tr>
                        <th width="15%"><center>Type</th>
                        <th width="15%"><center>Service</th>
                        <th width="10%"><center>Machine</th>
			<th width="10%"><center>Consultant</th> 
			                                               
                         <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
                        </th>
</tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" class="d-none">



   <td><input type = "text"   class="country form-control text-end" name="country[]" id = "country" >
   <td><input type = "text"   class="country form-control text-end" name="state[]" id = "state" >
   <td><input type = "text"   class="country form-control text-end" name="city[]" id = "city" >
   <td><input type = "text"   class="country form-control text-end" name="consultant[]" id = "cosultant" >           


		<td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
			
                      </tr>   </tbody> </table>
2

According to the javascript logic that dynamically adds the rows, the first row is supposed to be hidden because it serves as a template for the repeated markup.

You have been repeatedly told in replies that you cannot use ids when dynamically adding markup. You cannot reuse the same id on a page. Every id must be unique.

3

i am also using classes as well as ids, as per my detail code I also needed IDs