The cause of

I am working in an Internet financial company. Due to the project requirements to achieve the effect as shown in the above picture, I consulted a lot of information from the Internet, but without any results. Finally, I thought of dynamically changing the ID to avoid the repeated failure of id invocation

Conservative — inline calls

<! --> <div class="layui-form-item"> <label class="layui-form-label"><span> Interest date :</span></label> <div class="layui-input-inline"> <ul id="fuxiTime_containt"> <li class="clearfix lay-data-list" > <span class="caozuo_btn Caozuo_add "> Add </span>< label class="layui-form-label"><span> First interest payment date :</span></label> <div class="layui-input-inline layer-icon-data"> <input type="text" name="interest_payment_time" class="layui-input" id="fuxiTime_1" class="fuxiTime" onfocus="laydate({elem:'#fuxiTime_1',format:'YYYY-MM-DD',theme: '#fdd5004'})" > </div> </li> </ul> </div> </div>

Remember to introduce laydate.js, which is a separate version, see the official website documentation for details

FuxiTime (); function fuxiTime() { if(! $(".fuxiTime .caozuo_btn")) return; var i = 2; $("ul#fuxiTime_containt").delegate(".caozuo_btn", "click", Function () {var lis = "<span class='caozuo_btn caozuo_delete'> "+ "<label class='layui-form-label'><span> First "+ I +" Coupon Start :</span></label>" + "<div class=' Layui-input-inline layer-icon-data'>" + " <input type='text' class='layui-input' id='fuxiTime_" + i + "' class='fuxiTime' placeholder='' name='interest_payment_time' onfocus=\"laydate({'elem': '#fuxiTime_" + i + "',format:'YYYY-MM-DD'}); \" >" + "</div>" + "</li>"; if($(this).is(".caozuo_add")) { $(this).parents("ul").append(lis); i++; }; if($(this).is(".caozuo_delete")) { $(this).parent("li").remove(); }; })}

Open modern writing

<! <meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <style> body{padding: 20px; } .demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px; } .demo-footer{padding: 50px 0; color: #999; font-size: 14px; } .demo-footer a{padding: 0 5px; color: #01AAED; } </style> </head> <body> <! -- <input type="text" class="demo-input" placeholder=" placeholder "> --> <input type="text" class="demo-input" Key ='add_time1'; id="add_time" /> <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal addTime1" data-type='addTimes' onclick="addTime()" > <i class="layui-icon">&#xe615; < / I > add < / button > < script SRC = "http://code.jquery.com/jquery-2.1.4.min.js" > < / script > < script src="laydate/laydate.js"></script> <! - change your path -- > < script > / / lay (' # version). The HTML (' -v '+ laydate. V); Render ({elem: '#add_time' // specify element}); </script> <script> var num = 2; The function addTime () {$(' addTime '+ (parseInt (num) - parseInt (1))). After (" < br > < br > "+" to add "+ num +" time: "+ "<input type='text' class='demo-input' key='add_time '+num+"' placeholder= class='layui-btn layui-btn-sm layui-btn-radius layui-btn-normal addTime"+num+"' data-type='addTimes'>"+ "<i class='layui-icon'>&#xe615; < span style = "box-sizing: border-box; color: RGB (74, 74, 74); Render ({elem: '#add_time'+num // specify element}); num++; } </script> </body> </html>

Style notes about the date plug-in

The layDate version has different styles and of course the functionality doesn’t change much so the style doesn’t have much relevance to CSS.

The end of the

Train of thought is important, but there is no ancestors to guide the way, but also shrimp bullshit!