my code is messy and wasteful of lines, how do I make my code simple can this script be made simpler? I'm just learning about javascript, so I don't really know which syntax to use.
My HTML I have several id consisting of &quot;doc1, doc2, doc3, ..&quot; and there is another id &quot;icon-cek1, icon-ceck2, icon-cek3&quot;. &quot;icon-cek&quot; is used to display the place of a checkmark icon when the upload is successful / according to the extension that has been specified and if the file fails / doesn't match the extension will display a crossmark.
&lt;label&gt; DOcument 1&lt;/label&gt;
&lt;input type=&quot;file&quot;id=&quot;doc1&quot;/&gt;
&lt;label&gt; Choose&lt;/label&gt;
&lt;div id=&quot;icon-cek1&quot;&gt;&lt;/div&gt;

&lt;label&gt; DOcument 2&lt;/label&gt;
&lt;input type=&quot;file&quot;id=&quot;doc2&quot; /&gt;
&lt;label&gt; Choose&lt;/label&gt;
&lt;div  id=&quot;icon-cek2&quot;&gt;&lt;/div&gt;

&lt;label&gt; DOcument 3&lt;/label&gt;
&lt;input type=&quot;file&quot;id=&quot;doc3&quot;/&gt;
&lt;label&gt; Choose&lt;/label&gt;
&lt;div id=&quot;icon-cek3&quot;&gt;&lt;/div&gt;


    $.fn.checkFileType = function (options) {
    var defaults = {
      allowedExtensions: [],
      success: function () {},
      error: function () {},
    };
    options = $.extend(defaults, options);

    return this.each(function () {
      $(this).on(&quot;change&quot;, function () {
        var value = $(this).val(),
          file = value.toLowerCase(),
          extension = file.substring(file.lastIndexOf(&quot;.&quot;) + 1);

        if ($.inArray(extension, options.allowedExtensions) == -1) {
          options.error();
          $(this).focus();
        } else {
          options.success();
        }
      });
    });
  };

  $(&quot;#doc1&quot;).checkFileType({
    allowedExtensions: [&quot;pdf&quot;],
    success: function () {
      document.getElementById(&quot;icon-cek1&quot;).className = &quot;checkmark&quot;;
    },
    error: function () {
      document.getElementById('doc1').value='';
      document.getElementById(&quot;icon-cek1&quot;).className = &quot;crossmark&quot;;
    },
  });

    $(&quot;#doc2&quot;).checkFileType({
    allowedExtensions: [&quot;pdf&quot;],
    success: function () {
      document.getElementById(&quot;icon-cek2&quot;).className = &quot;checkmark&quot;;
    },
    error: function () {
      document.getElementById(&quot;doc2&quot;).value = &quot;&quot;;
      document.getElementById(&quot;icon-cek2&quot;).className = &quot;crossmark&quot;;
    },
  });

  $(&quot;#doc3&quot;).checkFileType({
    allowedExtensions: [&quot;pdf&quot;],
    success: function () {
      document.getElementById(&quot;icon-cek3&quot;).className = &quot;checkmark&quot;;
    },
    error: function () {
    alert(&quot;Just PDF&quot;);
      document.getElementById(&quot;doc3&quot;).value = &quot;&quot;;
      document.getElementById(&quot;icon-cek3&quot;).className = &quot;crossmark&quot;;
    },
  });

or is there a simpler code to handle the case I have?
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)) {