Selecting Correct Rows with q double row

by Julian

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">

<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden"><td></td><td>1a</td><td>2a</td><td>3a</td><td></td></tr>

  <tr class="table"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>
<tr class="table_hidden"><td></td><td>4a</td><td>5a</td><td>6a</td><td></td></tr>


  <tr class="table"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
  
  <tr class="table_hidden"><td></td><td>7a</td><td>8a</td><td>9a</td><td></td></tr>
  <tbody>
  </table>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
/*
.table_hidden {
  display: none; 
}
*/

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */


$('#data_table').on("click", ".add-row", function() {
 //var btnid= $(this).attr("id");//Find button ID
// var rowid= $(this).closest('tr').attr("id");//Find row ID
 
   var newdata= '<tr class="table"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr><tr class="table_hidden"><td></td><td>a</td><td>b</td><td>c</td><td></td></tr>';
   
   $(this).closest('tr').replaceWith(newdata);
   
   alert('done');
  
    });
    
  
    
   //$("#"+btn).click(function(){
  
    
  // });