Here is my specific requirement:
I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for that added row. The delete button should not be visible for the first row initially, but once a second row is added, it should become visible for the first row. Can you please assist me with this? Thank you in advance.
Below is a snippet of my code:
<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%">
<thead>
<tr>
<th width="5%">Sr.no</plh>
<th width="20%">Items</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>Unit</th>
<th>Amount</th>
<th>Tax</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select id="additems" name="additems" class="form-control" required="required">
<option selected>-- Select --</option>
<option><a href="" id="addnewpo">Add new</a></option>
<option value="1"> Abc </option>
<option value="2"> IT services </option>
<option value="3"> JS Enterprises</option>
</select>
</td>
<td>Dell 500 series</td>
<td>55,333</td>
<td>10</td>
<td>NA</td>
<td>5,53,330</td>
<td>8%</td>
<td width="2%"><a class="actions-btn" id="delete-row" title="Delete"><span class="icon ico-delete ico-2x"></span></a></td>
</tr>
</tbody>
</table>