Make form dynamicly add input with number - forms

Question

can anyone make these functions simple?
i have a ul:
<ul class="phone-type">
<li class="office" id="1"></li>
<li class="mobile" id="2"></li>
<li class="fax" id="3"></li>
</ul>
and the JS :
var o = 0;var m = 0;var f = 0;
$('ul.phone-type li.office').click(function () {
o++;
$('.phones').append('<input class="form-control phone_type" placeholder="'+ $(this).text()+'-'+o+'" name="phone['+$(this).attr('class')+'-'+o+']" type="text" ><br>');
});
$('ul.phone-type li.mobile').click(function () {
m++;
$('.phones').append('<input class="form-control phone_type" placeholder="'+ $(this).text()+'-'+m+'" name="phone['+$(this).attr('class')+'-'+m+']" type="text" ><br>');
});
$('ul.phone-type li.fax').click(function () {
f++;
$('.phones').append('<input class="form-control phone_type" placeholder="'+ $(this).text()+'-'+f+'" name="phone['+$(this).attr('class')+'-'+f+']" type="text" ><br>');
});
i have to reset it for every li..
is there any way that i can make it simple!!!!
tnx

Answer 1

This method will allow for an indefinite number of clickable list elements. Just ensure that you provide the 'data-type' attribute in any elements that are included.
When storing data in an html element, it is usually best to use the 'data' attribute. Using classes only works when there is one class.
HTML
<ul class="phone-type">
<li data-type="office" id="1">office</li>
<li data-type="mobile" id="2">mobile</li>
<li data-type="fax" id="3">fax</li>
</ul>
<div class="phones"></div>
JS
// This object will contain how many clicks each element has
var typeClicks = {};
$('ul.phone-type li').click(function() {
var li = $(this),
type = li.data('type'),
text = li.text(),
clicks;
// check if typeClicks contains any click data for this element
if (typeClicks.hasOwnProperty(type)) {
// if it does, increases tracked clicks by one
typeClicks[type]++;
clicks = typeClicks[type];
} else {
// if not, this will create an entry for this element
clicks = typeClicks[type] = 1;
}
// if not, this will create an entry for this element
$('.phones').append('<input class="form-control phone_type" placeholder="'+text+'-'+clicks+'" name="phone['+type+'-'+clicks+']" type="text" ><br>');
});