my code is messy and wasteful of lines, how do I make my code simple
Because the &lt;div&gt; associated with each input not its adjacent sibling, but its next sibling, you can dynamically navigate from the element being validated to its associated icon with .nextElementSibling calls. But your checkFileType isn't set up to call the success callback with a calling context of the element it's attached to, so fix that first. Change the success and error calls to:
options.success.call(this);

options.error.call(this);

and then the rest of your code simplifies to the following:
$('input[type=&quot;file&quot;]').checkFileType({
    allowedExtensions: [&quot;pdf&quot;],
    success() {
        $(this).next().next().attr('class', 'checkmark');
    },
    error() {
        $(this).val('');
        $(this).next().next().attr('class', 'crossmark');
    },
});

If you're going to use jQuery, go ahead and use it instead of the native DOM methods like getElementById if you want, native DOM methods are a bit more verbose than jQuery's $.
Using the above method, you'll also be able to remove the IDs entirely from your HTML. (Numeric indexed IDs are quite a code smell anyway.)
This is a pretty simple problem though, it seems pretty odd to need to use a big library like jQuery for something this trivial. (If you're just learning JavaScript, consider focusing on learning just built-in JavaScript rather than a particular library like jQuery, which is somewhat obsolete for most things it's used for nowadays - built-in methods work just fine and are usually easier to understand in my experience)
Just as one example, rather than
if ($.inArray(extension, options.allowedExtensions) == -1) {

you can use
if (!options.allowedExtensions.includes(extension)) {