<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="form-group col-md-12"> <label for="storeName">Option Value *</label> <div class="clearfix"></div> <label class="margin-right"><input type="radio" name="colorRadio" value="red"> Single</label> <label><input type="radio" name="colorRadio" value="green"> Multiple </label> <div class="red box" > <input id="multiValue" class="form-control" type="text" placeholder="Add Value" value="" name="multiValue[]" size="20" style=" border: 1px solid rgba(0,0,0,0.3); float: left; margin-bottom: 10px;"> </div> <div class="green box" id="hereToadd"> <ul> <li> <input id="multiValue" class="form-control" type="text" placeholder="Add Value" value="" name="multiValue[]" size="20" style=" border: 1px solid rgba(0,0,0,0.3); float: left; margin-bottom: 10px;"> </li> <li> <div class="btn-group"> <button type="button" class="btn btn-primary addValue">+</button> </div> </li> </ul> </div> </div> </div> </div>

.box{ padding: 0px; display: none; margin-top: 10px; clear: both; } .red{display: block} .green{} .green ul li{ float: left; } .green ul li:nth-child(1){ width: 93%; padding-right: 5px; } .green ul li:nth-child(2){ width: 7%; } .green ul li .btn { border: 1px solid transparent; border-radius: 0 !important; cursor: pointer; display: inline-block; font-size: 20px; font-weight: 400; line-height: 26px; margin-left: 1px !important; padding: 5px 12px; }

$(document).ready(function(){ $('input[type="radio"]').click(function(){ if($(this).attr("value")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } if($(this).attr("value")=="green"){ $(".box").not(".green").hide(); $(".green").show(); } if($(this).attr("value")=="blue"){ $(".box").not(".blue").hide(); $(".blue").show(); } }); }); $(document).on('click','.addValue',function(e){ e.preventDefault(); $('<ul><li><input id="multiValue" class="form-control" type="text" placeholder="Add Value" value="" name="multiValue[]" size="20" style=" border: 1px solid rgba(0,0,0,0.3); float: left; margin-bottom: 10px;"></li><li><div class="btn-group"><button type="button" class="btn btn-primary" id="deleteParent">-</button><button type="button" class="btn btn-primary addValue">+</button></div></li></ul>').appendTo('#hereToadd'); }); $(document).on('click','#deleteParent',function(e){ e.preventDefault(); $(this).parent().parent().parent().remove(); });