How can i add repeating js to each repeated group
gracecompany opened this issue · comments
This is the repeating part.
<div class="repeat">
<div class="col-lg-12">
<div class="panel panel-default wrapper">
<div class="panel-heading"><span class="glyphicon glyphicon-warning-sign"></span> Alerts Section</div>
<div class="panel-body alert-container row">
<p><span class="btn btn-primary add"><span class="glyphicon glyphicon-plus"></span> Add</span></p>
<div class="col-md-6 template ">
<table class="table table-condensed" width="100%" style="border-collapse:collapse;">
<tbody id="multi">
<tr data-toggle="collapse" data-target="#alert({row-count-placeholder})" class="accordion-toggle template row bg-primary">
<td style="max-width:5%"> <span class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></span> </td>
<td style="min-width:90%">
<input id="alert_title" class="form-control" name="alerts[alert_title][({row-count-placeholder})]" type="text" placeholder=" Alert Title" style="min-width:100%" /></td>
<td style="max-width:5%"> <span class="btn btn-default btn-xs"><span class="remove glyphicon glyphicon-remove"></span></span> </td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="alert({row-count-placeholder})">
<table class="table table-striped">
<thead>
<tr>
<th>LAYOUT</th>
<th>TYPE</th>
<th>ICON</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="alertstyle" name="alerts[alertstyle][({row-count-placeholder})]" class="form-control" autofocus>
<option value="" class="">-- layout --</option>
<option value="style-msg">Message Box</option>
</select>
</td>
<td>
<select id="alerttype" name="alerts[alerttype][({row-count-placeholder})]" class="form-control" autofocus>
<option value="" class="">-- type --</option>
<option value="successmsg" class="style-msg">Success Message</option>
</select>
</td>
<td>
<select id="alerticon" name="alerts[alerticon][({row-count-placeholder})]" class="form-control" autofocus>
<option value="" class="">-- icon --</option>
<option value="fa-exclamation" class="alertmsg alert-warning alert-success successmsg">fa-exclamation</option>
</select>
</td>
</tr>
<tr>
<textarea id="alert_message" name="alerts[alert_message][({row-count-placeholder})]" rows="5" style="min-width: 100%" placeholder=" Alert Message"></textarea>
</tr>
</tbody>
select
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
trying to get the following code to work with each new repeated block
$("select#alerttype").chained("select#alertstyle");
$("select#alerticon").chained("select#alerttype, select#alertstyle");
Multiple id => broke HTML and jquery, never use multiple id.