change the HTML with jQuery

$(response.students).each(function(key, element) {	

	if (response.notes.length === 0)
		ad1 = ap1 = ad2 = n1 = ap2 = n2 = media = ap3 = ap4 = "";
	else {
		ad1 = response.notes[key].ad1
		ap1 = response.notes[key].ap1
		n1 = response.notes[key].n1
		ad2 = response.notes[key].ad2
		ap2 = response.notes[key].ap2
		n2 = response.notes[key].n2
		media = response.notes[key].media
		ap3 = response.notes[key].ap3
		ap4 = response.notes[key].ap4 
	}

	container += '<ul class="notes list">'
	container +=    '<li style="width: 250px">     <label>Name: </label><input type=hidden name=students[' + element.id + ']>' + element.name + '</li>'
	container += 	'<li class=li100><label>AD1:   </label><input type=number  step=".01" min="0" max="10" name="ad1[' + element.id + ']" value="' + ad1 + '"></li>'
	container += 	'<li class=li100><label>AP1:   </label><input type=number step=".01"  min="0" max="10" name="ap1[' + element.id + ']" value="' + ap1 + '"></li>'
	container += 	'<li class=li100><label>N1:    </label><label name="n1[' + element.id + ']" class=n1>' + n1 + '</label></li>'
	container += 	'<li class=li100><label>AD2:   </label><input type=number step=".01"  min="0" max="10" name="ad2[' + element.id + ']" value="' + ad2 + '"></li>'
	container += 	'<li class=li100><label>AP2:   </label><input type=number step=".01"  min="0" max="10" name="ap2[' + element.id + ']" value="' + ap2 + '"></li>'
	container += 	'<li class=li100><label>N2:    </label><label name="n2[' + element.id + ']" class=n2>' + n2 + '</label></li>'
	container += 	'<li class=li100><label>Média: </label><label name="media[' + element.id + ']" class=media>' + media + '</label></li>'
	container += 	'<li class=li100><label>AP3:   </label><input disabled type=number step=".01" class="ap3" min="0" max="10" name="ap3[' + element.id + ']" value="' + ap3 + '"></li>'
	container += 	'<li class=li100><label>AP4:   </label><input disabled type=number step=".01" class="ap4"  min="0" max="10" name="ap4[' + element.id + ']" value="' + ap4 + '"></li>'
	container += '</ul>'

	console.log('Média is like: ', typeof(media))
	console.log("Value of média is like: ", media)
	console.log("Média is equal or more than 7: ", media >= 7)
	
	if (response.notes.length > 0)
		media >= 7 
			? (
				$(".ap3").prop("type", "text").prop("title", "Aproved").css("border-color", "green").val("Aproved"),
				$(".ap4").prop("type", "text").prop("title", "Aproved").css("border-color", "green").val("Aproved")
			)
			: media < 4  
				? (
					$(".ap3").prop("type", "text").prop("title", "Reproved").css("border-color", "red").val("Reprovado"),
					$(".ap4").prop("type", "text").prop("title", "Reproved").css("border-color", "red").val("Reproved")
				)		
				: (
					$(".ap3").prop("type", "number").prop("title", "").css("border-color", "#ccc"),
					$(".ap4").prop("type", "number").prop("title", "").css("border-color", "#ccc")
				)					
						
}),

i need to alter the proprierties type, title and css border-color like up, but it not change the HTML.

Why?