Working on Jquery clone where in large device like desktop and tablet user can clone more but in mobile I have to restrict user to clone 10. Is this possible to restrict user to clone
Here is the jquery code
var i = 1;
$(document).on("click", ".btn_more", function () {
$(".cloned-row:first").clone().insertAfter(".cloned-row:last").attr({
'id': function(_, id) {
return id + i
},
'name': function(_, name) {
return name + i
},
'class': "add_pn_grp"
//'value': ''
}).end().find('[id]').attr({
'id': function(_, id) {
return id + i
}
});
if(i < $('.cloned-row1').length){
$(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
}
i++;
});
$(document).on('click', ".btn_less", function () {
$(this).closest(".cloned-row").remove();
});
Here is the html code
<div id ="phone_div" class="col-xs-12 col-sm-9 col-md-9 col-lg-9 ">
<!--Phone information Help pop up-->
<div class="modal-dialog" role="document" id="phonehint" align="center">
<div class="modal-content">
<div class="modal-header text-center" >
<h4 id="myModalLabel" class="modal-title" style="color:black;">Help - Phone</h4>
</div>
<div class="modal-body" >
<h5 style="color:black;" align="left"> Provide number <br/>Provide your phone number along with the country code.</h5>
</div>
</div>
</div>
<!--Contact information Help pop up Ends-->
<label>Phone</label> <i class="fa fa-question-circle help_icon" onclick="showphonehint()" onmouseout="hidephonehint()"></i>
<div class="em_pho cloned-row">
<select id="sel_phntype" name="sel_phntype" class="sslt_Field">
<option selected='selected' value="">Phone Type</option>
<option value="BUSN">Business</option>
<option value="CAMP">Campus</option>
<option value="CELL" >Cellphone</option>
<option value="CEL2">Cellphone2</option>
<option value="FAX">FAX</option>
<option value="HOME">Home</option>
<option value="OTR">Other</option>
</select>
<span class = "ph-inline">
<input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" />
<input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
<input type="radio" name="preferred" id="rad_Prf" value="preferred">
<label class="radio-label">Preferred</label>
<!--<button class="btn_more" id="buttonvalue"></button>-->
<input type="button" class="btn_more" id="buttonvalue"/>
</span>
</div>
</div>
I have created variable count I have assigned the count as 10 but how to restrict in mobile I am confused like anything.
Kindly help me
Thanks in advance Mahadevan