Estoy tratando de crear un formulario que contiene un select option que al seleccionar la opción verificar muestre un botón de agregar campos de opciones, el problema es que a la hora de agregar 2 preguntas, seleccionar verificar en ambas y agregar campos de opciones, cuando quiero agregar mas campos de opciones en la primer pregunta creada las duplica, crea campos de opciones de dos en dos. Agradezco su ayuda Gracias!
$(document).ready(function() {
$('.verificar').hide();
$('.duplicate').hide();
var count = 2;
//duplicate
$('a.add').on('click', function() {
//clone
var row = $('.duplicate').clone();
$(row).insertAfter('.duplicate-btn');
$(row).show();
//add new ids
$(row).find('select').attr('id', 'select_' + count);
$(row).find('verificar').attr('id', 'verificar_' + count);
//remove duplicate class
$(row).removeClass('duplicate');
//onchange of select
$('select').on('change', function() {
var value = $(this).val();
var select = $(this).parent();
if (value == 1) {
$(select).siblings('.inputed').show();
$(select).siblings('.ocultar').hide();
} else {
$(select).siblings('.inputed').hide();
}
if (value == 2) {
$(select).siblings('.ocultar').show();
$(select).siblings('.verificar').show();
} else {
$(select).siblings('.verificar').hide();
$(select).siblings('.ocultar').show();
}
});
//click of remove pregunta
$(".up-box-question").on("click", ".remove-aditional", function() {
$(this).closest(".all").remove();
});
$(".optionRow").on("click", ".remove-option", function() {
$(this).closest(".option-row").remove();
});
//Agrega opciones
$(".addRow").click(function() {
var html = "<div class='option-row' id='rowtk" + count + "'><div class='form-group'><div class='input-group select'><input type='text' class='form-control' placeholder='Añade opción' /><span class='input-group-btn'><button class='btn btn-primary remove-option' type='button'><a class='remove-tipe' href='javascript: void(0)'><span class='glyphicon glyphicon-trash' style='color:white'></span></a></button></span></div></div></div>";
var form = $(html);
$(this).closest(".verificar").find(".optionRow").append(form);
});
});
count++;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="aditional-questions aditionals text">
<div class="aditional-box duplicate-btn">
<p class="aditional-text" for="">Pregunta
<a class="btn btn-primary agregar add" href="javascript: void(0)" type="button"><span></span>Agregar</a>
</p>
</div>
<div class="duplicate all">
<div class="up-box-question" style="text-align: center">
<a class="remove-aditional" href="javascript: void(0)"><span class="glyphicon glyphicon-trash icon"></span></a>
</div>
<div class="box-question" style="text-align: center">
<div class="row">
<label class="type-question-text">Tipo de Pregunta</label>
<div class="col-md-12">
<select class="form-control select" name="">
<option value="1">Text</option>
<option value="2">Verificar</option>
</select>
</div>
<div class="row ocultar">
<div class="col-md-12">
<label class="type-question-text" for="">Titulo</label>
<div class="form-group">
<input type="text" id="" class="form-control text general" placeholder="Número de indentificación">
</div>
</div>
</div>
<div class="row verificar">
<div class="text option" style="margin-top:10px; text-align: center">
<a class="btn btn-primary addRow" href="javascript: void(0)" type="button"><span></span>Agregar Opcion</a>
</div>
<br>
<div class="optionRow">
</div>
</div>
</div>
</div>
</div>
</div>