loop multiple show

rumahku

</pre   <pre lang="java"> <script type="text/javascript"> $(document).ready(function () { $("input[id^='input_size']").each(function () { var id = parseInt(this.id.replace("input_size", "")); $("#input_size" + id).change(function () { if ($("#input_size" + id).val() !== "") { $("#moreInputSizeLink").show(); } }); }); $("input[id^='input_color']").each(function () { var id = parseInt(this.id.replace("input_color", "")); $("#input_color" + id).change(function () { if ($("#input_color" + id).val() !== "") { $("#moreColorInputLink").show(); } }); }); $('#sizeMore').click(function () { var input_size= 2; //add more size var moreInputTag = ''; moreInputTag += '<div class="form-pallete col-lg-6">'; moreInputTag += '<div class="container">'; moreInputTag += '<div class="row">'; moreInputTag += '<!-- Text input-->'; moreInputTag += '<div class="col-lg-3">'; moreInputTag += '<input type="file" name="size[]" id="input_size' + input_size+ '" maxlength="25" class="form-control" placeholder=""/>'; moreInputTag += '</div>'; moreInputTag += '<div class="col-lg-9">'; moreInputTag += '<div class="element">'; moreInputTag += '<div class="row">'; moreInputTag += '<!-- Text input-->'; moreInputTag += '<div class="col-lg-4 mb-3">'; moreInputTag += '<input type="file" name="color[]" id="input_color2" maxlength="25" class="form-control" value="1"/>'; moreInputTag += '</div>'; moreInputTag += '<div class="col-lg-4 mb-3">'; moreInputTag += '<input type="number" name="quantity[]" maxlength="25" class="form-control" placeholder=""/>'; moreInputTag += '</div>'; moreInputTag += '<div class="col-lg-4 mb-3">'; moreInputTag += '<input type="number" name="soldout[]" maxlength="25" class="form-control" placeholder=""/>'; moreInputTag += '</div>'; moreInputTag += '<!-- Text input-->'; moreInputTag += '</div>'; moreInputTag += '</div>'; moreInputTag += '<div id="moreColorInput"></div>'; moreInputTag += '<div style="clear:both;"></div>'; moreInputTag += '<div id="moreColorInputLink" style="margin-left: 10px;">'; moreInputTag += '<a href="javascript:void(0);" id="colorMore' + input_size+ '">Attach another Color</a>'; moreInputTag += '</div>'; moreInputTag += '</div>'; moreInputTag += '<!-- Text input-->'; moreInputTag += '</div>'; moreInputTag += '</div>'; moreInputTag += '</div>'; $('<dl id="delete_size' + input_size+ '">' + moreInputTag + '</dl>').fadeIn('slow').appendTo('#moreInputSize'); input_size++; }); $('#colorMore').click(function () { var input_color = $(this).attr("id"); //add more Color var moreInputTag = ''; moreInputTag += '<div class="element">'; moreInputTag += '<div class="row">'; moreInputTag += '<div class="col-lg-4 mb-3">'; moreInputTag += '<input type="file" name="color[]" id="input_color' + input_color + '" value="' + input_color + '" maxlength="25" class="form-control" placeholder=""/>'; moreInputTag += '</div>'; moreInputTag += '<div class="col-lg-4 mb-3">'; moreInputTag += '<input type="number" name="quantity[]" maxlength="25" class="form-control" placeholder=""/>'; moreInputTag += '</div>'; moreInputTag += '<div class="col-lg-4 mb-3">'; moreInputTag += '<input type="number" name="soldout[]" maxlength="25" class="form-control" placeholder=""/>'; moreInputTag += '</div>'; moreInputTag += '</div>'; moreInputTag += '&nbsp;<a href="javascript:void" style="cursor:pointer;" onclick="deletecolorLink(' + input_color + ')">Delete ' + input_color + '</a>'; moreInputTag += '</div>'; $('<dl id="delete_color' + input_color + '">' + moreInputTag + '</dl>').fadeIn('slow').appendTo('#moreColorInput'); input_color++; }); }); function deletesizeLink(eleId) { if (confirm("Are you really want to delete ?")) { var ele = document.getElementById("delete_size" + eleId); ele.parentNode.removeChild(ele); } } function deletecolorLink(eleId) { if (confirm("Are you really want to delete ?")) { var ele = document.getElementById("delete_color" + eleId); ele.parentNode.removeChild(ele); } } </script>

rumahku

<meta charset="UTF-8"> <title>Input Multiple size(s)</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"; integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <div id="container"> <form name="Input_form" enctype="multipart/form-data" action="sizes_Input.php" method="POST"> <fieldset> <legend>Input Multiple size(s)</legend> <section> <label>Browse a size</label>   <div class="form-pallete col-lg-6"> <div class="container"> <div class="row"> <!-- Text input--> <div class="col-lg-3"> <input type="file" name="input_size1" id="input_size1" maxlength="25" class="form-control" placeholder=""/> </div> <!-- step input--> <div class="col-lg-9"> <div class="element"> <div class="row"> <!-- Text input--> <div class="col-lg-4 mb-3"> <input type="file" name="color[]" id="input_color1" maxlength="25" class="form-control" placeholder=""/> </div><strong><strong></strong></strong> <div class="col-lg-4 mb-3"> <input type="number" name="quantity[]" maxlength="25" class="form-control" placeholder=""/> </div> <div class="col-lg-4 mb-3"> <input type="number" name="soldout[]" maxlength="25" class="form-control" placeholder=""/> </div> <!-- Text input--> </div> </div> <div id="moreColorInput"></div> <div style="clear:both;"></div> <div id="moreColorInputLink" style="display:none;margin-left: 10px;"> <a href="javascript:void(0);" id="colorMore">Attach another Color</a> </div> </div> <!-- end input--> </div> </div> </div> <div id="moreInputSize"></div> <div style="clear:both;"></div> <div id="moreInputSizeLink" style="display:none;margin-left: 10px;"> <a href="javascript:void(0);" id="sizeMore">Attach another size</a> </div>   </section> </fieldset> <div>&nbsp;</div> <footer> <input type="submit" name="Input" value="Input"/> </footer> </form> </div>